axios 介绍

axios 介绍

axios 是一款基于 javascript xhr 进行封装的插件,自己通过 xhr 进行编写 ajax 请求,实现起来逻辑比较复杂,axios 封装后将复杂的逻辑写在插件的内部,我们用户只需要关心如何调用即可。对我们的开发带来了很大的便捷。

安装

:::warning 注意

在 webpack 案例的基础上进行 axios 实现,请保留上个案例的代码。如需要请查看 搭建本地开发服务器

:::

通过命令安装 axios 插件

sh 复制代码
$ yarn add axios

使用

main.js 文件中编写 axios 代码。

javascript 复制代码
import axios from 'axios'

const p1 = axios({
    method: 'post',
    url: 'https://study.noxussj.top/api/login',
    data: 'account=test&password=123456',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    }
})

p1.then((res) => {
    console.log(res.data)
})

通过 npx webpack-dev-server 命令运行项目预览效果,同时在浏览器中按 F12 打开调试工具。

可以看到接口请求成功了。

原文链接:菜园前端

相关推荐
临江仙4555 分钟前
前端骚操作:用户还在摸鱼,新版本已悄悄上线!一招实现无感知版本更新通知
前端·vue.js
想个什么名好呢5 分钟前
解决uniapp的H5项目uni-popup页面滚动穿透bug
前端
用户938169125536016 分钟前
Vue3项目--mock数据
前端
前端加油站30 分钟前
一种新HTML 页面转换成 PDF 技术方案
前端·javascript·vue.js
w***Q35036 分钟前
Vue打包
前端·javascript·vue.js
有事没事实验室41 分钟前
router-link的custom模式
前端·javascript·vue.js
4***V20242 分钟前
Vue3响应式原理详解
开发语言·javascript·ecmascript
常乐我净6161 小时前
十、路由和导航
前端
Tonychen1 小时前
TypeScript 里 infer 常见用法
前端·typescript
米诺zuo1 小时前
MUI sx prop 中的响应式适配
前端