axios拦截器interceptors

axios拦截器-interceptors

基本介绍

拦截器：

​ 拦截器是axios向服务器端发送请求和响应回来所经历的两道关口。

​ 拦截器关键字：interceptors。

axios本身有两种拦截器：请求拦截，响应拦截。

• 请求拦截器：

  axios每次开始请求的时候先执行此处逻辑，在请求拦截器可以给axios做请求前的配置和检查工作，检查ok的情况下就开始向服务器端发请求。

• 响应拦截器：

  axios完成与服务器端交互，回到客户端后就执行此处逻辑，在响应拦截器可以判断axios请求是否成功，或相关数据过滤操作。

请求拦截器代码：

// 请求拦截器
axios.interceptors.request.use(function (config) {
  // 放置业务逻辑代码
  return config;
}, function (error) {
  // axios发生错误的处理
  return Promise.reject(error);
});

响应拦截器代码：

// 响应拦截器
axios.interceptors.response.use(function (response) {
  // 放置业务逻辑代码
  // response是服务器端返回来的数据信息，与Promise获得数据一致
  return response;
}, function (error) {
  // axios请求服务器端发生错误的处理
  return Promise.reject(error);
});

拦截器设置好，axios"所有"的请求就都会执行拦截器操作。

拦截器应用案例

在发送请求获取服务端数据的时候，添加加载等待案例效果。

步骤：

1. 通过img标签显示加载图片，同时设置v-show=“flag” 控制是否显示。
2. 在data中声明flag:false 信息，控制图片显示。
3. 在created生命周期函数中配置请求、响应拦截器。

代码：

<div class="showhead">
    <img src="./loading.gif" alt="" v-show="flag" >  
</div>

Vue实例相关代码：

// 生命周期方法created：自动调用
created(){
    // 请求拦截器
    axios.interceptors.request.use(config=> {
        // 请求的业务逻辑
        this.flag = true // 显示加载图片
        return config;
    }, error=> {
        // 一开始请求失败的业务逻辑
        return Promise.reject(error);
    });

    // 响应拦截器
    axios.interceptors.response.use(response=> {
        // 请求完毕的后续回调处理，成功情况
        this.flag = false // 隐藏加载图片
        return response;
    }, error=> {
        // 请求完毕的后续回调处理，失败情况
        return Promise.reject(error);
    });
    this.getBrandList()
},

注意：

1. 各个拦截器的第一个函数参数需要设置为 “箭头函数” ，使得内部this与外部保持一致，都是Vue实例。
2. 各个拦截器需要设置在created中，这样会自动执行和配置、时机最早、可以随时操控data。

拦截器细节说明

config参数 ：

axios.interceptors.request.use(function (config) {
  return config;
}, function (error) {
  return Promise.reject(error);
});

config是一个对象 与 axios.defaults 相当(不等于)，config可以给axios进行配置，例如设置baseURL的信息、设置token。

response参数：

axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  return Promise.reject(error);
});

response参数是服务器端给返回的具体数据信息，与业务axios接收的数据一致。

注意：

Promise.reject()和 Promise.reject(error) 分别代表的意思。

Promise.reject(data) 是 语法糖的用法，本质与下述一致，即返回一个Promise对象。

Promise.reject(data)
// 相当于
new Promise(function(resolve,reject){
  reject(data)
})

Promise.resolve(data)
// 相当于
new Promise(function(resolve){
  resolve(data)
})