基于Axios的封装和请求接口的管理

安装Axios

npm i axios -S

开始编码

// request.js
/**
 * @intro: http统一封装.
 */
import axios from 'axios';

/**
 * 判断是否是 FormData
 * @param formData
 * @returns {boolean}
 */
const isFormData = (formData) => !!formData && Object.prototype.toString.call(formData) === '[object FormData]';

/**
 * 是否是表单数据格式化
 * @param d
 * @returns {boolean}
 */
const isFormScheme = (d) => typeof d === 'string' && /([^&?]*)=([^&?]*)/i.test(d);

/**
 * 判断接口返回的code是否正确
 * @param code  接口返回的code
 * @returns {boolean}
 */
const judgeCode = (code) => /^0$/.test(code);
/**
 * 判断接口返回的code是否未登录
 * @param code  接口返回的code
 * @returns {boolean}
 */
const judgeUnLoginCode = (code) => /^-100$/.test(code);

const service = axios.create({
  // 设置全局默认的headers
  headers: {
    'Content-Type': 'application/json',
  },
  // 设置请求超时设置
  timeout: 30000,
  responseType: 'json',
  // 请求转换
  transformRequest: [
    (data, headers) => {
      // 这里可以在请求头中增加token，如果后台是jwt这种鉴权的话
      const { token } = 用户token对象;
      // eslint-disable-next-line no-param-reassign
      if (token && !headers.Authorization) headers.Authorization = `Bearer ${token}`;

      // 表单上传
      if (isFormData(data)) return data;
      // 普通表单
      if (isFormScheme(data)) {
        headers['Content-Type'] = 'application/x-www-form-urlencoded';

        return data;
      }

      return JSON.stringify(data);
    },
  ],
});

// response拦截
service.interceptors.response.use(
  (response) => {
    const { data } = response;
    const resCode = data?.code;

    // 请求成功
    if (judgeCode(resCode)) return data;
    // 未登录
    if (judgeUnLoginCode(resCode)) {
      // 未登录执行操作
    }

    // 返回统一格式
    return Promise.reject({
      ...data,
      type: 'business',
    });
  },
  (err) => {
    const resError = err.response || {};
    const { data } = resError;
    if (data && typeof data === 'string') {
      // 返回统一格式
      return Promise.reject({
        code: resError.status || '500',
        message: data,
        type: 'business',
      });
    }

    // 返回统一格式
    return Promise.reject({
      code: resError.status || '500',
      message: err.message || 'System Busy!',
      type: 'system',
    });
  },
);

export default service;

使用

// 新增
export const addUser = (data) => request.post('/user/add', data);
// 删除
export const deleteUser = (data) => request.delete('/user/deleted', data);
// 修改
export const updateUser = (data) => request.put('/user/update', data);
// 查询
export const getUserList = (params) => request.get('/user/list', {params});

说明

request.get('/user/list', {params});

如果是form表单提交方式需要将data序列化，比如：

export const addUser = (data) => request.post('/user/add', qs.stringify(data));

如果是form表单上传方式需要将数据转成FormData类型，比如：

/**
 * 对象转formData对象
 * @param obj 对象
 * @returns {FormData}
 */
const object2FormData = (obj = {}) => {
  const fd = new FormData();
  Object.keys(obj).forEach((key) => {
    fd.append(key, obj[key]);
  });

  return fd;
};

// 上传接口
export const upload = (data) => request.post('/upload', object2FormData(data));

数据都为一对象