Vue.js 学习笔记十六：Axios 之拦截器

目录

拦截器

---

拦截器

axios 提供了拦截器，用于我们在发送每次请求或者得到相应后，进行对应的处理。

// 添加请求拦截器
axios.interceptors.request.use(config => {
    // 在发送请求之前做些什么
    return config
  }, error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  })

// 添加响应拦截器
axios.interceptors.response.use(response => {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, error => {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  })

拦截器可以做到的事情，比如：

• 当发起网络请求时，在页面添加一个loading 组件，作为动画效果。

• 当某用户发起请求，必须先登录，判断用户是否有 token， 如果没有则跳转 login 页面。

• 对请求参数进行序列化。

const qs = require('qs')
...
config.data = qs.stringify(config.data)

拦截器中错误拦截较少，通常都是配置相关的拦截。

可能的错误比如请求超时，可以将页面跳转到一个错误页面中。