持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第N天，点击查看活动详情
axios介绍
Axios 是一个基于 promise 网络请求库，作用于
node.js和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.jshttp模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
由于Vue本身是不具备通讯工具的，故需要一个额外的通讯框架和服务器进行交互，而作为最火热的网络请求库，axios自然也就成为了vue官方推荐的交互工具了，当然这也和他拥有极为优秀的功能特性分不开的：
特性
- 从浏览器创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF
安装
使用 npm:
npm install axios
在学习axios之前，你必须掌握的知识是ajax和es6新增的promise，如果还没有学会相关的内容，那建议看AJAX文档和阮一峰老师的ES6标准入门
Json-Server模拟接口
当我们在后端尚未给我们传来接口的时候，我们可以通过node模块中的Json-server来mock一个数据接口，当后端把接口给我们的时候也方便我们直接替换接口即可，对于前后端分离式开发无疑是有益的。
安装Json-Server
npm install -g json-server
创建db.json
我们在vscode中去创建一个带数据的db.json文件，例如：
{
"posts": [
{
"id": 1,
"title": "json-server",
"author": "typicode"
},
{
"title": "今天天气不错啊",
"author": "张三",
"id": 2
}
}
启动json-server
json-server --watch db.json
便会在终端窗口得到如下结果：
axios基本操作
在运行好json-server后，我们便可以开始尝试axios的一些基本操作了
我们先引入axios和bootstrap(直接引入到当前页面即可)，再搭建一个基础界面，能满足我们基本操作的静态页面
<div class="container">
<h2 class="page-header">基本使用</h2>
<button class="btn btn-primary">发送get请求</button>
<button class="btn btn-warning">发送post请求</button>
<button class="btn btn-success">发送PUT请求</button>
<button class="btn btn-danger">发送DELETE请求</button>
</div>
GET请求
GET命令的作用是获取数据，接下来我们用实际代码来演示一下
// 获取按钮
// 返回与文档指定的选择器组匹配的中的元素（ 列表使用优先的先遍历文档的节点）
const btns = document.querySelectorAll('button')
// 第一个按钮
btns[0].onclick = () => {
axios({
// 请求类型
method: 'GET',
// URL
url: 'http://localhost:3000/posts/1',
}).then(response => {
console.log(response);
})
}
打开网页，查看控制台，发现输出了db.json中的数据
POST请求
POST命令的作用是向原接口发送数据，添加新的数据
// 添加一篇新的文章
btns[1].onclick = () => {
axios({
// 请求类型
method: 'POST',
// URL
url: 'http://localhost:3000/posts',
// 设置请求体
data: {
title: "今天天气不错啊",
author: "张三"
}
}).then(response => {
console.log(response);
})
},
成功运行后，我们打开db.json查看数据的变化：
发现数据已经成功添加
PUT请求
PUT命令的作用是更新数据，相当于数据库中的“改”
我们修改第三个按钮，来添加axios命令：
btns[2].onclick = () => {
axios({
// 请求类型
method: 'PUT',
// URL
// PUT需要传id(此处需要修改的是id=3的数据)
url: 'http://localhost:3000/posts/3',
// 设置请求体
data: {
title: "今天天气不错啊",
author: "李四"
}
}).then(response => {
console.log(response);
})
},
点击按钮，再查看db.json，发现数据已经发生了改变：
DELETE请求
delete命令的作用是删除数据，废话不多说我们直接上代码
btns[3].onclick = () => {
axios({
// 请求类型
method: 'delete',
// URL
url: 'http://localhost:3000/posts/3'
}).then(response => {
console.log(response);
})
}
我们打开控制台：
发现返回的数据已为空，再打开db.json发现先前的POST和PUT修改的数据已经被删除了
而这四个最基础的操作，便组成了增删改查
axios拦截器
这部分可以直接参考官方的文档
axios默认配置
当我们每次使用axios的基本操作的时候，我们会发现都会涉及到URL，每次都要写那么一长串似乎有些太麻烦了一点了，我们发现不同的命令在URL上面的区别似乎只有最后的一部分，那么这时候，我们可以设置一个默认的URL地址，或者叫做基础的URL，只需要在后面添加一部分即可。
除此之外，我们还可以设置默认的超时时间，当超过我们的设置时间仍未返回结果我们就取消请求，接下来，我们结合代码来看看：
axios.defaults.method = 'GET' //默认的请求类型为get
axios.defaults.baseURL = 'http://localhost:3000/' //设置基础url
axios.defaults.parmams = {
id: 100
} //默认id为100
axios.defaults.timeout = 3000 //设置超时时间(3秒后如果结果还没回来就取消请求)
是不是豁然开朗了，关于默认配置，我们还可以查看官方的文档，这里就不多赘述了
总结
总得来说，作为想要从事前端开发的人来说，axios是无疑必备的一项技能，学会了axios才能在后端人员给我接口的时候，能够对他的接口“为所欲为”哈哈哈哈，希望这篇文章能够顺利让你入门axios，祝您顺利
