码字,杂谈

axios的二次封装

之前项目是用到了axios,它本身是对ajax的二次封装。不过我们在使用的时候经常是对axios再进行二次封装,从而达到我们需要的效果。现在把代码整理了一下,贴上来。

首先,安装axios:

npm install axios

还有一个qs是格式化参数用的,如果不需要,可以不用,直接拼接也可以。

/*
 * @Author: JeremyJone
 * @Date: 2020-03-03 17:58:23
 * @LastEditors  : JeremyJone
 * @LastEditTime : 2020-03-03 19:33:56
 * @Description: axios封装示例,含详细注释,仅用于学习使用。
 */

// 引入axios
import axios from "axios";
// 格式化数据的第三方库
import qs from "qs";

/**
 * 环境的配置,区分生产环境和开发环境
 */
switch (process.env.NODE_ENV) {
  case "production":
    // 生产环境,部署到的服务器
    // baseURL配置基地址,配置之后就不需要在每个接口填写完整路径
    axios.defaults.baseURL = "http://生产真实地址";
    break;
  case "test":
    axios.defaults.baseURL = "http://测试环境";
    break;
  default:
    axios.defaults.baseURL = "http://开发环境";
    break;
}

/**
 * 设置超时时间,单位毫秒
 */
axios.defaults.timeout = 50000;

/**
 * 设置是否允许跨域和是否允许携带凭证,如果该设置为false,请求时不允许携带凭证
 */
axios.defaults.withCredentials = true;

/**
 * 设置请求头
 *   - 设置请求传递数据的格式,通常需要包含 `x-www-form-urlencoded` 格式,该格式的数据通常为 `xxx=xxx&yyy=yyy`,这是为了post请求与get请求的格式相同
 */
axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
// 针对post请求设置数据格式,该方法transformRequest仅针对post请求有效
// 使用qs库将传入的data数据转换为 `x-www-form-urlencoded` 格式
// 当然,这需要看服务器使用什么数据格式,如果服务器使用json,那么不需要这样设置
axios.defaults.transformRequest = data => qs.stringify(data);

/**
 * 设置请求拦截器。它的执行逻辑:
 *   客户端的请求 -> 请求拦截器 -> 服务器
 * 这样可以对请求操作进行一系列的处理,再发送给服务器,比如,添加TOKEN
 */
axios.interceptors.request.use(
  config => {
    // 携带token,从本地读取到token,然后添加到请求头
    const token = localStorage.getItem("token");
    token && (config.headers.Authorization = token);
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

/**
 * 自定义响应成功的HTTP状态码
 * 通常情况下不需要,因为开发的程序一般不会出现3开头的状态码
 * 如果需要,可以打开注释
 */
// axios.defaults.validateStatus = status => {
//   return /^(2|3)\d{2}$/.test(status);
// };

/**
 * 响应拦截器。它的知性逻辑:
 *   服务器返回信息 -> 相应拦截器 -> 客户端获取到信息
 * 这样可以首先对响应的信息做一些预处理,从而使得客户端的代码更加整洁
 */
axios.interceptors.response.use(
  response => {
    // 成功后返回response的主体,其他数据一般并不需要,这样在使用中只需要关注数据主体就可以
    return response.data;
  },
  error => {
    let { response } = error; // 等效于error.response
    if (response) {
      // 服务器返回了结果
      // 这里能够读出服务器返回的错误HTTP状态码,根据不同状态码进行不同处理
      // 这个根据业务需求操作即可
      switch (response.status) {
        case 401:
          // 权限不够,一般是未登录
          // ...
          break;
        case 403:
          // 服务器已经接受,但是拒绝访问,通常是登录过期
          // ...
          localStorage.removeItem("token");
          break;
        case 404:
          // 找不到资源
          // ...
          break;
      }
    } else {
      // 服务器根本就没有返回任何东西
      // 这里一般只有两种情况,服务器崩溃,客户端没有网。
      // 通常在这里做断网处理
      if (!window.navigator.onLine) {
        // 处理断网
        // ...
        return;
      }
      // 什么都不是,返回一个错误
      return Promise.reject(error);
    }
  }
);

// 都写好,最后将axios导出
export default axios;

然后,将axios添加到自己的项目中,比如在Vue中:

Vue.prototype.$http = axios;

然后,在任何一个Vue的组件中,都可以直接使用this.$httpgetpost等方法来调用这个axios。

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注