ajax请求拦截器与响应拦截器

请求拦截器

请求拦截器,在发送ajax请求之前进行一些操作, 如果要发送多次ajax请求，接口里的一些操作又是相同的，可以使用请求拦截器，例如在每个请求体里加上token，这样就不用每次请求ajax单独设置token了。

// 请求拦截器
service.interceptors.request.use(
  (confid) => { //confid参数是本次请求的配置
  // 在发送请求之前进行一些操作
    const token = store.getters.token   //获取组件里的token
    confid.headers.Authorization = 'Bearer ' + token  
    return confid  //本次请求的配置信息,会发送到后台服务器
  },
  (error) => {
   // 对请求错误做些什么
    return Promise.reject(error)
  }
)

响应拦截器

响应拦截器，ajax请求成功后进行一些操作，例如对本次响应的数据进行解构或判断服务器返回登录状态是否失效。

service.interceptors.response.use(
  (response) => {  //response参数是本次服务器响应的数据
   // 对响应数据做点什么
    // 1.将axios返回的数据解一层壳
    const res = response.data
    // 2.统一处理错误的响应
    const { message, success } = res  //经过解构后的ajax数据
    if (!success) {  
      Message.error(message)          //登录失败提示信息
      return Promise.reject(new Error(message))
    }
    return res
  },
  (error) => {
    // 当服务器返回的错误信息是 401 10002时退出登录
    if (error.response.status === 401 || error.response.data.code === 10002) {
      Message.error('会话过期已退出登录')
      store.dispatch('user/logout') // 清空用户数据(token)
      router.push('/login') // 跳转回登录页面
    } else {
      console.dir(error) // 便于调试
      Message.error(error.res.message) // 提示错误消息
    }
    return Promise.reject(error)
    return Promise.reject(error)
  }
)