axios 请求封装

1.前言

本文是对于 axios 的二次封装处理，axios 是一个基于 Promise 的网络请求库，作用于node.js 和浏览器中；
本文对于axios 中的封装着重于直接使用，如果想要学习axios 相关知识可以先行离开，后续在对其进行完善

2.axios 下载

npm install axios

3.代码实现

//request.ts
import axios, { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
import { showFailToast } from 'vant';

const codeMessage: any = {
  110: "当前未登录,请先登录",
  200: '服务器成功返回请求的数据。',
  201: '新建或修改数据成功。',
  202: '一个请求已经进入后台排队（异步任务）。',
  204: '删除数据成功。',
  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
  401: '用户没有权限（令牌、用户名、密码错误）。',
  403: '用户得到授权，但是访问是被禁止的。',
  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
  406: '请求的格式不可得。',
  410: '请求的资源被永久删除，且不会再得到的。',
  422: '当创建一个对象时，发生一个验证错误。',
  500: '服务器发生错误，请检查服务器。',
  502: '网关错误。',
  503: '服务不可用，服务器暂时过载或维护。',
  504: '网关超时。'
}


const request: AxiosInstance = axios.create({
  timeout: 1000 * 30, // 请求超时时间,
});

// 异常拦截处理器
const errorHandler = (error: AxiosError) => {
  if (error.response) {
    console.log(codeMessage[error.response, status]);
  }
  return Promise.reject(error);
};

request.interceptors.request.use((config: AxiosRequestConfig) => {

  let newConfig: any = { ...config }
  newConfig.url = config.url

  if (localStorage.getItem("token")) {
    newConfig.headers["token"] = localStorage.getItem("token") || ""
  } else {
    console.log("没有token");
  }
  return newConfig;
}, errorHandler);

// 后置拦截器（获取到响应时的拦截）
request.interceptors.response.use((response: AxiosResponse) => {
  if (response.data.code === 200) {
    return response.data
  } else {

    if (response.data.code === 110) {
      // 未登录时的逻辑处理
    }
    showFailToast(codeMessage[response.data.code]);
    return
  }

}, errorHandler);


/**
 * 通用数据处理
 * @param options
 */
const dealParamsBody = (options: any) => {
  // 存在分页器的时候
  if (options.params && options.params.pagination) {
    options.params.pageSize = options.params.pagination.pageSize;
    options.params.pageNum = options.params.pagination.current;
    delete options.params['pagination'];
  }

  // equals 处理
  if (options.params && options.params.equals) {
    let ids: any = [];
    let equalsObj = options.params.equals;
    Object.keys(equalsObj).map((key) => {
      if (equalsObj[key]) {
        ids.push(key + '=' + equalsObj[key]);
      }
    });
    options.params.equals = ids.join(',');
  }

  return options;
};


/**
 * 发起请求
 * @param url
 * @param options
 * @returns {Promise<>}
 */
async function req(url: string, options: any) {
  let { prefix } = options;
  if (typeof prefix === "function") {
    prefix = prefix(url);
  }
  if (prefix) {
    url = prefix + url;
  }
  return new Promise((resolve, reject) => {
    request(url, {
    //dealParamsBody 按照各自的实际情况进行处理
      ...dealParamsBody(options),
      headers: {
        ...options.headers, token: localStorage.getItem("token") || '',
      },
    })
      .then((res: any) => {
        if (options.rawResponse) {
          resolve(res);
        } else {
          let data = res.data;
          resolve({ data, recordsTotal: res.recordsTotal })
        }
      })
      .catch((err) => {
        reject({ code: err.data.status, message: err.data.error });
      });
  });
}



/**
 * get请求
 * @param url
 * @param params
 * @param options
 */
async function get(url: string, params = {}, options = {}) {
  return req(url, { ...options, method: 'GET', params });
}

/**
 * post请求
 * @param url
 * @param data
 * @param options
 */
async function post(url: string, data = {}, options = {}) {

  return req(url, { ...options, method: 'POST', data: data });
}

/**
 * 表单提交
 * @param url
 * @param data
 * @param options
 * @returns {Promise}
 */
async function form(url: string, data = {}, options = {}): Promise<unknown> {
  return req(url, { ...options, method: 'POST', data, requestType: 'form' });
}



export default {
  req,
  get,
  post,
  form
};

4.实际使用

import HttpUtil from "./request";

export default {
  // post请求
  post: (data = {}) => HttpUtil.post("请求接口", data),
  // get 请求
  get: (data = {}) => HttpUtil.get("请求接口", data),
};