一、axios的基本使用：
✿ 使用axios前必知细节：
1、axios 函数对象（可以作为axios(config)函数使用去发送请求，也可以作为对象调用方法axios.request(config)发送请求)
■ 查看源码发现:
□ 起初，axios是一个函数
（调用axios(config)函数发送请求，实际上是调用Axios.prototype.request(config) 方法）
□ 在后续，又给它添加上了一些属性【方法属性】（将Axios原型上的方法属性添加到instance身上,所以axios可以调用属性axios.request(config)发送请求）
2、[, ] 是可选参数列表 举例：axios.get(url[, config])，其中的[, config] 是可选参数
1、axios(config):调用自身，通用/最本质的发任意类型请求的方法：
<button class="btn btn-primary">post请求</button> //获取按钮 const btns = document.querySelectorAll('button'); btns[0].onclick = function (){ //调用axios方法来发送AJAx请求，axios方法的返回值是一个Promise对象（then方法可以拿到异步请求的结果） axios({ //请求类型 method: 'post', //URL url:'http://localhost:3000/posts/2', //设置请求体(即传输的数据) data:{ title: "candy", author: "i like" } }).then(response => { console.log(response) }) };
2、axios.request(config)：调用属性的方法发送请求,等同于 axios(config）
<button class="btn btn-primary">post请求</button> //获取按钮 const btns = document.querySelectorAll('button'); btns[0].onclick = function (){ //调用axios方法来发送AJAx请求，axios方法的返回值是一个Promise对象（then方法可以拿到异步请求的结果） axios.request({ //请求类型 method: 'post', //URL url:'http://localhost:3000/posts/2', //设置请求体(即传输的数据) data:{ title: "candy", author: "i like" } }).then(response => { console.log(response) }) };
3、使用axios的实例对象（通过axios.create([config]) 进行创建）：
//一般创建axios实例时，传入一些默认配置 const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} }); //instance 实例和 axios对象功能基本差不多 //使用axios的实例对象instance，方法的返回值是一个Promise对象（then方法可以拿到异步请求的结果） instance({ //请求类型 method: 'GET', //URL url: '/getJoke', //设置请求体(即传输的数据) params:{ title: "candy", author: "i like" } }).then(response => { console.log(response); })
✿ 使用axios(config) 方法 和创建 axios实例对象的区别？
■ axios.create(config) 对axios请求进行封装，创建axios实例对象的意义：不同请求接口拥有不同配置，创建新的axios实例就可以有新的配置来应对接口配置需求。每个axios实例对象都有自己特有的配置, 分别应用到不同要求的接口请求中。
■ axios实例对象和axios基本相同，只是实例对象少了有取消请求和批量发请求的方法。
二、axios的拦截器（对请求、响应做预处理）
1、请求拦截器：axios.interceptors.request.use(成功处理函数，失败处理函数)
■ 请求拦截：
1,可能是config中有一些信息是不符合服务器的要求
2,希望每次发送网络请求，在界面可以显示有一个请求的图标，就是那个转呀转的圆圈
3,一些网络请求必须要有特殊信息，例如登录（需要有token）
2、响应拦截器：axios.interceptors.response.use(成功处理函数，失败处理函数)
■ 响应拦截：
1,对响应的数据进行格式处理
三、axios的取消请求
■ 作用：取消掉某些用户，多次不断地点击请求按钮而发送请求给服务器造成压力
■ 取消方式：
（例如通过构造函数来创建取消令牌）：在配置对象中添加 cancelToken属性，然后拿到执行函数中的参数c（取消函数）
let cancel = null; //检测上一次请求是否完成（没完成，取消当前的请求） if(cancle != null){ cancle(); } //axios发送请求 axios.get('/user/12345', { cancelToken: new axios.CancelToken(function executor(c){//参数c是取消函数 cancel = c; }) }).then(response => { console.log(response); cancel = null; //请求执行完毕，恢复cancel的初始值 });
