Axios详细解析

Axios

Axios介绍

1、Axios是什么？

• Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。

2、Axios特性

• （1）支持Promise API
• （2）拦截请求与响应，比如：在请求前添加授权和响应前做一些事情。
• （3）转换请求数据和响应数据，比如：进行请求加密或者响应数据加密。
• （4）取消请求
• （5）自动转换JSON数据
• （6）客户端支持防御XSRF

3、浏览器支持情况

• Firefox、Chrome、Safari、Opera、Edge、IE8+

Axios常用的请求方法

get, post, put, patch, delete

• get： 一般用户获取数据
• post： 一般用于表单提交与文件上传
• patch： 更新数据（只将修改的数据推送到后端）
• put： 更新数据（所有数据推送到服务端）
• delete：删除数据

备注：

​ post一般用于新建数据，put一般用于更新数据，patch一般用于数据量较大的时候的数据更新。

get方法

• 方式一
  如果不带有参数，代码如下：

      axios
        .get("/data.json")
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
  

  如果带有参数，代码如下：

  	axios
        .get("/data.json", {
          params: {
            id: 12
          }
        })
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
  

• 方式二
  如果不带参数，代码如下：

      axios({
          method:'get',
          url:'/data.json'
      }).then(res=>{
          console.log(res)
      })

​ 如果带有参数，代码如下：

 axios({
      method: "get",
      url: "/data.json",
      params:{
          id:12
      }
    }).then(res => {
      console.log(res);
    });

浏览器控制台相关信息介绍：

• Request URL：请求URL
• Request Method：请求方式

post方法

post 请求常用的数据请求格式有两种：

form-data（常用于表单提交（图片上传、文件上传））

 let data = {
      id: 12
    };
    let formData = new FormData();
    for(let key in data){
      formData.append(key,data[key])
    }
    console.log(formData)
    axios.post('/data.json',formData).then(res=>{
      console.log(res,'formData')
    })

application/json（常用）

• 方式一

  let data = {
      id: 12
    };
    axios.post("/data.json", data).then(res=>{
      console.log(res, 'post')
    });

• 方式二

		 let data = {
	      id: 12
	    };
	    axios({
	      method:'post',
	      url:'/data.json',
	      data:data
	    }).then(res=>{
	      console.log(res)
	    })
	```
## put方法

```javascript
let data = {
  id: 12
};
axios.put("/data.json", data).then(res=>{
  console.log(res, 'put')
});

delete方法

• 方式一：params

axios
  .delete("/data.json", {
    params: {
      id: 12
    }
  })
  .then(res => {
    console.log(res, "delete");
  });
  
let params = {
  id: 12
};
axios({
  method:'delete',
  url:'/data.json',
  params:params
}).then(res=>{
  console.log(res)
})

• 方式二：data

axios
  .delete("/data.json", {
    data: {
      id: 12
    }
  })
  .then(res => {
    console.log(res, "delete");
  });
  
let data = {
  id: 12
};
axios({
  method:'delete',
  url:'/data.json',
  data:data
}).then(res=>{
  console.log(res)
})

总结：上述方法中均对应两种写法：

​ （1）使用别名：形如axios.get()；

​ （2）不使用别名形如axios()；

patch方法

let data = {
  id: 12
};
axios.patch("/data.json", data).then(res=>{
  console.log(res, 'patch')
});

备注：

​ put与patch与post方法只有method不同，其他相同。

并发请求

并发请求，就是同时进行多个请求，并统一处理返回值。

在例子中，我们使用axios.all，对data.json/city.json同时进行请求，使用axios.spread，对返回的结果分别进行处理。代码如下：

// 并发请求
axios.all([axios.get("/data.json"), axios.get("/city.json")]).then(
  axios.spread((dataRes, cityRes) => {
    console.log(dataRes, cityRes);
  })
);

注意：

​ axios.all的参数是请求函数的数组，在对应的回调then中，调用axios.spead对返回值进行处理，即可。

​ 并发请求的应用场景：需要同时进行多个请求，并且需要同时处理接口调用的返回值的时候，我们可以使用并发请求。

axios实例的创建

​ 比如：后端接口地址有多个（www.test.com、www.example.com），并且超时时长不同（1000ms、2000ms），这个时候，我们可以创建实例。

​ 思路如下：创建多个实例，配置不同的超时时长，用不同的实例去请求不同的接口。使用axios.acreate来创建实例，配置相关信息，进行网络请求。代码如下：

// 实例1
let instance = axios.create({
  baseURL:'http://loacalhost:8080',
  timeout:1000
})
instance.get('/data.json').then(res=>{
  console.log(res)
})
//实例2
let instance2 = axios.create({
  baseURL: "http://loacalhost:8081",
  timeout: 2000
});
instance2.get("/city.json").then(res => {
  console.log(res);
});

axios实例的相关配置

（1）配置列表

baseURL：请求的域名（基本地址）。

timeout：请求的超时时长，超出后后端返回401。

备注：一般由后端定义，后端的接口需要的处理时长较长的时候，如果请求的时间过长，后端处理不过来，就会阻塞，给服务器造成较大的压力。设置后，可以及时释放掉。

url：请求路径。

method：请求方法。如：get、post、put、patch、delete等。

headers：请求头。

params：将请求参数拼接到url上

data：将请求参数放置到请求体里

    axios.create({
        baseURL:'', //请求的域名（基本地址）
        timeout:2000, //请求的超时时长，单位毫秒，默认。
        url:'/data.json', //请求路径
        method:'get', //请求方法
        headers:{
            token:''
        }, //设置请求头
        params:{

        },//将请求参数拼接到url上
        data:{

        }, //将请求参数放置到请求体里
    });

三种配置方式：

• axios全局配置

    axios.defaults.baseURL = 'http://localhost:8080'
    axios.defaults.timeout = 2000

• axios实例配置

    let instance = axios.create();
    instance.defaults.timeout = 3000

• axios请求配置

    instance.get('/data.json',{
        timeout:5000
    })

优先级：axios全局配置 < axios实例配置 < axios请求配置

常用参数配置的使用方法

举例1：

    let instance1 = axios.create({
        baseURL:'http://localhost:8888',
        timeout:1000
    })
    instance1.get("/contactList",{
        params:{
            id:10
        }
    }).then(res=>{
        console.log(res)
    })

注意：

​ 最终的有效配置是由优先级高的覆盖优先级低的。

拦截器

什么拦截器？

在请求前或响应被处理前拦截他们，分为两种：请求拦截器与响应拦截器

拦截器的使用方法

• 请求拦截器

    //   请求拦截器
    axios.interceptors.request.use(config => {
      // 在发送请求前做些什么
      return config;
    }, err=>{
        // 在请求错误的时候的逻辑处理
        return Promise.reject(err)
    });

• 响应拦截器

    // 响应拦截器
    axios.interceptors.response.use(res => {
      // 在请求成功后的数据处理
      return res;
    }, err=>{
        // 在响应错误的时候的逻辑处理
        return Promise.reject(err)
    });

• 取消拦截器

	let inter = axios.interceptors.request.use(config=>{
        config.header={
            auth:true
        }
        return config
    })
    axios.interceptors.request.eject(inter)

实用举例A：登录权限

需要token的接口实例

    // 需要token的接口
    let instance = axios.create({});
    instance.interceptors.request.use(config=>{
        config.headers.token = '';
        return config
    })

不需要token的接口实例

    // 不需要token接口
    let newInstance = axios.create({});

实用举例B：

移动端开发数据加载loading动画

    // 请求的加载动画loading
    let instance_phone = axios.create({});
    instance_phone.interceptors.request.use(config=>{
        $('#loading').show();
        return config
    })
    instance_phone.interceptors.response.use(res=>{
        $('#loading').hide();
        return res
    })

错误处理

结合请求拦截器与响应拦截器来说，不管是请求错误还是响应错误，都会执行catch方法。

		//  请求拦截器
    axios.interceptors.request.use(
      config => {
        // 在发送请求前做些什么
        return config;
      },
      err => {
        // 在请求错误的时候的逻辑处理
        return Promise.reject(err);
      }
    );
    // 响应拦截器
    axios.interceptors.response.use(
      res => {
        // 在请求成功后的数据处理
        return res;
      },
      err => {
        // 在响应错误的时候的逻辑处理
        return Promise.reject(err);
      }
    ); 
	axios
      .get("data.json")
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(res);
      });

错误处理举例

在实际开发中，不会再每次网络请求的时候，都使用catch方法，可以添加统一的错误处理方法。代码如下：

    //   请求错误处理
    let instance = axios.create({});
    instance.interceptors.request.use(
      config => {
        return config;
      },
      err => {
        // 请求错误的常见状态码：4XX  401-请求超时  404-mot found
        $("#error").show();
        setTimeout(()=>{
           $("#error").hide(); 
        }, 2000)
        return Promise.reject(err);
      }
    );
    // 响应错误处理
    instance.interceptors.response.use(
      res => {
        return res;
      },
      err => {
        // 响应错误的常见状态码 5XX 500-服务器错误 502-服务器重启
        $("#error").show();
        setTimeout(()=>{
           $("#error").hide(); 
        }, 2000)
        return Promise.reject(err);
      }
    );
    instance.get("/data.json").then(res=>{
        console.log(res,'请求成功')
    }).catch(err=>{
        console.log(err,'除了拦截器设置的处理之外的其他处理')
    })

思路分析：首先创建实例，给实例设置请求拦截器与响应拦截器。

（1）请求错误的常见状态码以4开头，如401-请求超时、404-接口未找到；

（2）响应错误的常见状态码以5开头，如500-服务器错误、502-服务器重启等。

（3）处理设置请求拦截器与响应拦截器的操作外，如果还要其他操作，我们可以在请求的时候，在使用catch方法。