简单的axios拦截器

「小更新一下吧。💐💐💐某些时候我们是需要在请求接口的时候，做一下拦截器，对请求的结果做一下统一的处理及响应。不需要钱每个地方都做重复的工作」

「比如：一些登录授权、账号绑定解绑页面、用户购买页面其实都是需要用户传递token 或者openid 或者其他一些固定的参数需要做用户验证的」

「当用户当前账户长时间不登录过期的时候可以强制要求用户重新登录授权。」

// request拦截器
service.interceptors.request.use(config => {

    // 请求header中携带信息
    //封装一个方法获取当前用户的token
    //具体怎么获取token 或者openid 等信息根据自己的业务决定
    
    config.headers['Authorization'] = getUserInfo().token;
    return config
}, error => {

    // Do something with request error
    //这里使用一个UI组件的toast组件给予用户提示。
    
    toast({ type: "fail", message: "网络请求出错" });
    if (typeof error == 'object') {
        onSensors("requestError", { error: error.toString() });
    }
    return Promise.reject(error)
})

// respone拦截器 处理普通的响应错误状态  并予以提示
service.interceptors.response.use(response => {
    if (response.status >= 200 && response.status < 300 && response.data && response.headers) {
        // success
        return { res: response.data, headers: response.headers }
    } else {
        toast({ type: "fail", message: "httpStatusCode:" + response.status });
    }
}, error => {
    if (error.response && error.response.status && error.response.status == 401) {
        removeCookies();
        checkLogin(() => {
            //do something when cookie is exist
        });
        return;
    }
    toast({ type: "fail", message: "网络响应错误" });
    onSensors("responseError", { error: error.toString() });
    return Promise.reject(error)
})


 //描述  捕获401  http response 拦截器, 并对返回的errcode 进行判断，如果是过期的话重新唤起授权

axios.interceptors.response.use(
  response => {
    const res = response.data
    if (res.errcode === xxx || res.errCode === xxxx) {
      window.location.href = `重新授权登录接口拼接回调`
    } else {
      return response
    }
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          window.location.href = `重新授权登录接口拼接回调`
      }
    }
    return Promise.reject(error.response.data) // 返回接口返回的错误信息
  });

本文使用 mdnice 排版