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 打开调试工具。

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

原文链接:菜园前端

相关推荐
BlackWolfSky几秒前
ES6 教程学习笔记
前端·javascript·es6
IT_陈寒几秒前
Redis性能翻倍的5个冷门技巧:从缓存穿透到集群优化实战指南
前端·人工智能·后端
木易 士心2 分钟前
Node.js 性能诊断利器 Clinic.js:原理剖析与实战指南
开发语言·javascript·node.js
不老刘3 分钟前
深入理解 React Native 的 Metro
javascript·react native·react.js·metro
哆啦A梦15883 分钟前
67 token 过期时间
前端·javascript·vue.js·node.js
萌狼蓝天5 分钟前
[Vue]AntV1.7表格自带筛选确定和重置按钮位置交换
前端·javascript·css·vue.js·html
by__csdn9 分钟前
Axios封装实战:Vue2高效HTTP请求
前端·javascript·vue.js·ajax·vue·css3·html5
匠心网络科技12 分钟前
前端框架-框架为何应运而生?
前端·javascript·vue.js·学习
没文化的程序猿15 分钟前
高效获取 Noon 商品详情:从数据抓取到业务应用全流程手册
前端·javascript·html