原来这就是axios啊

1. axios的基本特质

axios是基于Promise用于浏览器和node.js的HTTP客户端。

axions的基本特征

1. 在浏览器中发送 XMLHttpRequests 请求
2. 在 node.js 中发送 http请求
3. 支持 Promise API
4. 能拦截请求和响应
5. 自动转换为JSON格式
6. 能转换请求和响应数据

2. axios基本用法

第一步导入axios

通过命令安装axios

npm install axios --save

第二步将axios导入main.js入口文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios"

Vue.prototype.$axios = axios //将axios 挂载到Vue原型上 这样我们在组件中只需要this.$axios即可操作axios方法
Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

第三步在组件中使用axios

 //请求地址来自B站 ilovecoding老师的Vue教程
//axios 默认get请求方式 其他请求方式需在url同级下 定义method
this.$axios({ 
    url: "http://123.207.32.32:8000/home/multidata" ,
    method:"get"
}).then(
      (res) => {
        console.log(res);
      },
      (err) => {
        console.log(err);
      }
    );

3. axios 发送并发请求

虽然不常用，但在一些特定的场合，我们可能需要同时发送两个请求。

axios.all 和promise.all方法类似，参数是一个数组，里面可以存放多个请求。返回值也是一个数组，数组内的每个元素与请求参数按顺序一一对应。

 created() {
  
    let get1 = this.$axios({ url: "http://123.207.32.32:8000/category" });
    let get2 = this.$axios({
      url: "http://123.207.32.32:8000/home/multidata",
      methos: "get",
      // 请求时传入的参数
      params: {
        type: "sell",
        page: 1,
      },
    });
    this.$axios.all([get1, get2]).then(
      // axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2
      this.$axios.spread((res1, res2) => {
        console.log(res1);//第一个请求返回
        console.log(res2);//第二个请求返回
      })
    );
  },

4. axios响应结果的主要属性

属性	说明
data	实际响应的数据
headers	响应头的信息
status	响应状态码
status-Text	响应状态信息

响应图：

开发者工具（浏览器F12）中的Network中也可以查看，如果发生错误，方便我们准确定位。

5. axios全局配置

项目开发中，我们很多的请求参数是固定的，可以抽取这些参数出来，进行全局配置。

5.1 axios配置部分配置项

this.$axios({参数配置})

参数配置	说明
url	请求地址
baseURL	请求根路径（一般全局配置）
method	请求类型
headers	自定义请求头
params	URL查询对象
timeout	超时设置（一般在全局中配置）

6. axios的简单封装

第一步创建封装文件

第二步在main入口文件引入

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kyNGtK6d-1616477679326)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7a4c3b6dc0da4dbdae591c9e8ad2c02b~tplv-k3u1fbpfcp-watermark.image)]
第三步在组件中使用

7. axios的拦截器

7.1 请求拦截器

作用：在请求发送前进行一些操作。

举例：1.在每个请求体中加上token，在这里统一做了处理以后修改也方便。

​ 2.一个特效就是请求时有个圆圈转啊转的，请求结束图片消失。

![7.拦截器](images/7.拦截器.png)//全局配置请求拦截器
//创建请求拦截器
//axios.interceptors.request.use(请求成功回调，请求失败回调)
axios.interceptors.request.use(config=>{
    //里面时请求之前要处理的函数体
    
     //一定要return
    return  config
},err=>{console.log(err)})

7.2 响应拦截器

作用：接收到响应后进行的操作

//创建响应拦截器
//axios.interceptors.response.use(响应成功回调，响应失败的回调)
axios.interceptors.response.use(res=>{
	  响应成功后的事件处理函数，
	 //注意 同样需要return
	 return res.data
},err=>console.log(err))