拦截器

概念

在请求接口调用时触发

在请求或响应被 then 或 catch 处理前拦截它们，分为请求拦截器（发送请求前触发）和响应拦截器（得到响应结果后触发）。

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

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对成功响应数据做点什么
    return response; // 具体场景：return的内容是在.then的时候真实获取的数据，比如'data.data.data.token'复杂操作，就可以相应拦截器中进行处理
    }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

注意

注意：一定要有返回值

请求拦截器实例

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 添加 icode
    config.headers.icode = 'icode'
    // 在这统一注入token
    if (store.getters.token) {
      config.headers.Authorization = `Bearer ${store.getters.token}`
    }
    // 必须返回 config
    return config
  }, error => {
    return Promise.reject(error)
  }
)

响应拦截器实例

// 响应拦截器
service.interceptors.response.use(
  // 请求成功的处理
  response => {
    // 从服务端给我们的数据可以得到
    // success 代表请求是否成功
    // message 代表请求的描述信息
    // data 代表服务端返回的内容
    const {
      success,
      message,
      data
    } = response.data
    // 需要判断当前请求是否成功
    if (success) {
      return data
    } else {
      // 失败（请求成功，业务失败），消息提示
      ElMessage.error(message)
      // 业务失败不能进入成功的回调
      return Promise.reject(new Error(message))
    }
  },

  // 请求失败
  error => {
    ElMessage.error(error.message)
    return Promise.reject(error)
  })