前言
学习axios的前置条件是需要了解Ajax技术，这是一个技术统称，是为了让页面实现局部刷新的概念模型。传统ajax是由XMLHttpRequest(XHR)实现的，为了更好更深刻的理解学习axios我建议先补充这两部分知识（这两部分的文章希望有一天能补上先挖坑ing）。目前我们前端请求数据的主流方式就是使用axios库来实现的，所以axios是前端开发中很重要的一环。如果已经准备好了那么请和我一起学习什么是axios吧！！！
axios是什么？
axios是一个基于Promise的网络请求库，作用于node.js和浏览器中，在服务端使用node.js http模块请求数据，在客户端使用使用XMLHttpRequest请求数据。
axios官网
安装使用axios的步骤
npm install axios
axios的基本语法
axios基于配置选项创建请求
axios({
method:'get', // 请求的类型
url:'http://localhost:3000/user', // 请求的url地址
}).then(result=>{
// 请求成功的回调
console.log(result)
}).catch(err=>{
// 请求失败的回调
console.log(err)
})
axios基于配置选项创建请求的常用配置项
- method
创建请求时的请求类型，例如post,get,delete,put等。 - url
请求的url地址 - baseURL
基础路径
基础路径=协议+ip+端口
注意⚠️：请求路径 = 基础路径 + 项目路径
如果baseURL配置了，那么url就应该配置项目路径。 - params参数
get请求的参数。 - data参数
put,patch,post请求的参数。 - transfromRequest
是请求过滤，允许在在向服务器发送请求前修改请求数据，只能用于put,post,patch几个请求类型中。 - transfroResponse
是响应过滤，在传递给then/catch前允许修改响应数据 - header
是即将被发送的自定义请求头。
语法：header:{ // 需要配置的请求头 }
参数携带在url后面的两种方式
- 在url的"/"后面跟的参数叫路径参数。
语法：url/参数 - 在url的"?"后面携带的参数叫查询参数
- 语法：url?参数
全局配置
通过axios配置项请求数据中，其中有一个配置项baseURL是配置基础路径的，如果每请求一个数据都要重复写会产生很多重复代码，且不利于维护，所以通过全局配置来解决此问题。
语法：axios.default.baseURL = "基础路径"
axios请求方法的别名
在使用别名方法时，method,url,data这些属性不用在配置中指定。 语法：
axios.get/post/...('url地址',{
// 参数
}).then(res=>{
// 请求成功的回调
console.log(res)
}).catch(err=>{
// 请求失败的回调
console.log(err)
})
axios拦截器
客户端向服务器请求数据会通过axios的请求拦截器
服务器向客户端发送响应数据会通过axios的响应拦截器
简而言之，在请求或响应被then或catch处理前拦截它们。
和transfromRequest和transfromResponse的区别:
- transfromRequest和transfromResponse是针对某一个请求的请求拦截/响应拦截。
- 这里的拦截器一旦配置就是全局的，所以使用时应当谨慎。
拦截器的适用场景： 多个请求/响应的请求过滤/响应过滤都是一样的那么我们可以使用请求/响应拦截器。
axios请求数据的异步请求
结合async和await使用 语法：
async function getInfo(){
const result = await axios.get('url',{})
}
后语
此篇文章只是写了axios常用的一些知识点，不够全面，想要了解更多内容请移步官网查看，当然如果有需要补充的地方请大佬多多指导，不断学习，不断进步～
