初识axios拦截器和简单封装

前言

之前对于拦截器的概念很浅，只有遇到问题才偶尔去网上查询相关的内容，后来接触到小程序后，一直对请求配置相关的东西是懵懵懂懂的感觉，也没有花时间去仔细研究，总觉得可以用就完事了。

直至最近，手上的项目真的遇到问题，才意识到了问题的严重性。（其实一部分原因是之前我觉得有人负责，有人比我知道的多，我就不需要管，然而这种内容，是养料，是进步的阶梯。）

所以在争取到开发时间后，我决定好好研究一下请求相关的内容，虽然还是九牛一毛，但足够给之前的自己一个狠狠的耳光了。废话不多说，下面开始show code.

首先创建axios的实例

// 域名
let baseUrl = "http://xxxxapi.cn/api/";

// 实例
var hnRequest = axios.create({
  baseURL: baseUrl, // 基础（前缀）url
  withCredentials: false, // 跨域凭证
  timeout: 1000 * 12 // 超时秒数
});

设置post请求方式的请求头

// 设置post请求头
hnRequest.defaults.headers.post["Content-Type"] =
  "application/x-www-form-urlencoded";

接下来是配置请求拦截器

let getToken = "";

// 请求拦截器
hnRequest.interceptors.request.use(
  config => {
    // 登录流程控制中，根据本地是否存在token判断用户的登录情况
    // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
    // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
    // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
    const token = "bearer " + getToken;
    // 这个token是本项目的用法，可自行配置。
    token && (config.headers.Authorization = token);
    return config;
  },
  error => Promise.error(error)
);

配置响应拦截器，也是比较重要的一部分

// 响应拦截器
hnRequest.interceptors.response.use(
  // 请求成功
  res => {
    // console.log(res);
    // res.status === 200 ? Promise.resolve(res) : Promise.reject(res)
    if (res.status === 200) {
      let { code } = res.data;
      code === "200"
        ? Promise.resolve(res)
        : errorHandle(res.data.code, res.data.message);
    } else {
      Promise.reject(res);
    }
    return res;
  },
  // 请求失败
  error => {
    console.log("error==>", error);
    const { response } = error;
    if (response) {
      // 请求已发出，但是不在2xx的范围
      errorHandle(response.status, response.data.message);
      return Promise.reject(response);
    } else {
      // 处理断网的情况
      tip("网络开小差了");
    }
  }
);

待更新。。。。。