封装axios的两种方式

慕仲卿2023-10-24 11:35

作为前端工程师，经常需要对axios进行封装以满足复用的目的。在不同的前端项目中使用相同的axios封装有利于保持一致性，有利于数据之间的传递和处理。本文提供两种对axios进行封装的思路。

1. 将请求方式作为调用参数传递进来

  1. 首先导入了axios, AxiosInstance和AxiosResponse模块，用于创建一个http请求的实例和处理响应结果。
  2. 定义了一个getBaseUrl函数，用于获取请求的基础URL。
  3. 创建了httpProto实例，使用axios.create方法进行创建。并配置了请求的超时时间为5000ms，不携带凭证，设置请求的Content-Type为application/json;charset=UTF-8，并允许跨域访问。
  4. 添加了一个请求拦截器 ，通过httpProto.interceptors.request.use方法，对请求进行处理。首先使用getBaseUrl函数获取基础URL，并将其添加到请求的baseURL属性中。然后通过getToken函数获取凭证，如果凭证存在，则将其添加到请求的Authorization头部字段中。最后返回处理后的请求配置。
  5. 添加了一个响应拦截器 ，通过httpProto.interceptors.response.use方法，对响应进行处理。首先获取响应的data字段，然后判断data.result的值，如果为0则表示请求成功，直接返回data。否则将返回一个失败的Promise，reject的值为data。
  6. 定义了一个http函数，用于发送请求。这个函数接收一个method参数和其他参数(rest)，然后通过httpProto[method](...rest)的形式调用httpProto实例的对应方法发送请求。
  7. 定义了一个urls对象，用于存储可供使用的URL路径，其中有一个示例路径example。
  8. 定义了一个methods对象，用于存储常用的请求方法名称，包括get、post和delete。

完整的代码如下所示：

ts 复制代码 
import axios, { AxiosInstance, AxiosResponse } from "axios";
import { getToken } from "./token";

// 获取请求的基础URL
const getBaseUrl = () => `http://${window.constant.serverIp}:8888}`;

// 创建http请求的实例对象
const httpProto: AxiosInstance = axios.create({
  timeout: 5000,
  withCredentials: false,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8',
    'Access-Control-Allow-Origin': '*',
  }
});

// 添加请求拦截器
httpProto.interceptors.request.use((config: any) => {
  // 配置baseURL
  config.baseURL = getBaseUrl();
  // 获取凭证
  const token = getToken();
  if (token) {
    // 如果有凭证就加上此凭证
    config.headers.Authorization = `${token}`;
  }
  return config;
}, (error) => {
  return Promise.reject(error)
});

// 添加响应拦截器
httpProto.interceptors.response.use(
  (response: AxiosResponse) => {
    const { data } = response
    // 统一处理响应结果
    if (data.result === 0) {
      return data;
    } else {
      return Promise.reject(data);
    }
  },
  (error) => {
    // 统一处理错误信息
    return Promise.reject(error);
  }
);

// 将httpProto实例，也就是AxiosInstance实例对象封装起来
const http = (method: string, ...rest: any) => {
  return httpProto[method](...rest);
}

// 可供使用的urls
const urls = {
  example: `/prod/example`,
}

const methods = {
  get: 'get',
  post: 'post',
  delete: 'delete',
}

export { http, urls, methods };

2. 直接调用某请求方式对应的请求方法

  1. 导入了axios模块的相关类型和函数。
  2. 定义了printLog函数，用于处理日志输出。
  3. 定义了IResponse接口，表示请求响应对象的格式。
  4. 定义了RequestParams接口，表示发送请求的配置项的格式。
  5. 定义了IHttp接口，表示封装对象支持的请求方式/方法。
  6. 定义了req对象，用于向外暴露支持的请求方法。
  7. 定义了methods数组，表示支持的请求方式类型。
  8. 使用forEach方法遍历methods数组，逐步构造req对象上的各个方法。
  9. 在每个方法的构造过程中，进行以下步骤：
    • 参数合并，将默认的responseType设置为'json'。
    • 从params对象中解构需要的参数。
    • 使用axios.create方法创建一个AxiosInstance实例对象。
    • 创建请求头对象，并设置一些常用的请求头信息。
    • 构造请求配置对象AxiosRequestConfig。
    • 根据请求方式对请求配置进行修正，主要是将data赋值到相应的字段中。
    • 添加请求拦截器，并在成功和失败的情况下返回配置。
    • 添加响应拦截器，并在成功和失败的情况下返回处理结果。
    • 构造请求成功的回调函数，对返回数据进行格式化的操作。
    • 构造请求失败的回调函数，处理错误日志和断网情况。
    • 发送请求并将请求结果作为函数的返回值。
  10. 默认导出req对象。

以下是加上注释的完整代码：

typescript 复制代码 
import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';

// 日志处理，可定制
const printLog = console;

// 作为被Promise包裹的请求响应对象的格式
export interface IResponse {
  code: number;
  msg: string;
  result: {
    lastOperaTime: number;
    data: any;
  };
}

// 发送请求的配置项的格式
export interface RequestParams {
  url: string;
  baseUrl?: string;
  data?: object;
  filter?: boolean;
  responseType?: 'arraybuffer' | 'blob' | 'document' | 'json' | 'text' | 'stream';
  headers?: any;
  timeout?: number;
}

// 封装对象支持的请求方式/方法
interface IHttp {
  get?: (params: RequestParams) => Promise<any>;
  post?: (params: RequestParams) => Promise<any>;
  put?: (params: RequestParams) => Promise<any>;
  patch?: (params: RequestParams) => Promise<any>;
  delete?: (params: RequestParams) => Promise<any>;
}

// 支持的请求方式类型
export type HttpMethod = 'get' | 'post' | 'put' | 'patch' | 'delete';

// 向外暴露出去的对象
const req: IHttp = {};

// 支持的请求类型
const methods: HttpMethod[] = ['get', 'post', 'put', 'patch', 'delete'];

// 遍历methods数组，逐步构造req对象
methods.forEach((_m: HttpMethod) => {
  // 使用遍历的方式对req对象上的各个方法进行构造
  req[_m] = (params: RequestParams) => {
    // 1. 构造参数合并
    params = {
      ...params,
      responseType: params.responseType || 'json',
    };

    // 2. 从使用对象方法的形参上结构出必要的参数
    const {
      url, // 服务器地址
      data, // 有效载荷
      filter = true, // 过滤器
      responseType, // 返回类型
      timeout, // 超时时间
    } = params;

    // 3. 使用axios创建AxiosInstance实例对象
    const instance = axios.create({
      baseURL: params.baseUrl ?? `http://${window.location.hostname}`,
      timeout,
    });

    // 4. 创建请求头对象
    const headers = {
      lastOperaTime: Date.now(), // 时间戳
      token: getToken(), // 凭证
      lang: getLocalLocale(), // 语言
      Accept: 'application/json', // 接受返回数据的类型
      'Content-Type': 'application/json; charset=utf-8', // 内容格式
    };

    // 5. 请求配置
    const axiosConfig: AxiosRequestConfig = {
      method: _m, // 请求方法
      url, // 服务器地址
      headers: {
        // 合并请求头
        ...headers,
        ...(params.headers || {}),
      },
      responseType, // 返回值类型
    };

    // 6. 针对不同的请求类型需要对请求配置进行修正
    if (data) {
      // 对于有效载荷，不同的请求方式携带信息的方式是不同的，在这里做了区分
      if (_m === 'get') {
        axiosConfig.params = data;
      } else if (data instanceof FormData) {
        axiosConfig.data = data;
      } else {
        axiosConfig.data = data;
      }
    }

    // 添加请求拦截器
    instance.interceptors.request.use(
      // 占位
      (config: any) => {
        return config;
      },
      // 失败则返回失败
      (error: any) => {
        return Promise.reject(error);
      }
    );

    // 7. 添加响应拦截器
    instance.interceptors.response.use(
      // 成功的回调，将发起请求的参数作为第二参数回传
      (res: any) => handleSuccess(res, params),
      // 失败的回调，将发起请求的参数作为第二参数回传
      (err: any) => handleError(err, params)
    );

    // 8. 构造请求成功的回调函数 -- 主要是对返回数据进行格式化的操作
    function handleSuccess(response: AxiosResponse<IResponse>, requestParams: RequestParams) {
      if (response.data) {
        // 解构数据
        const { code, msg, result } = response.data;
        if (code !== 0) {
          printLog.error(msg);
        }

        return filter ? result?.data ?? result : response.data;
      } else {
        printLog.error('incorrect data format');
        return response.data;
      }
    }

    // 9. 构造请求失败的回调函数
    function handleError(err: AxiosError, requestParams: RequestParams) {
      if (err.response) {
        printLog.error(`api: ${requestParams.url}: ${err.response.status}`);
      }
      if (err instanceof Error) {
        if (err.message) {
          printLog.error(err.message);
        }
      }
      if (!window.navigator.onLine) {
        // 处理断网情况
        printLog.error('netwrok error');
      }
      return Promise.reject(err);
    }

    // 10. 发送请求并将请求结果（Promise对象）作为函数的返回值
    return instance.request(axiosConfig);
  };
});

export default req;
相关推荐
还是大剑师兰特38 分钟前
D3的竞品有哪些，D3的优势，D3和echarts的对比
前端·javascript·echarts
王解39 分钟前
【深度解析】CSS工程化全攻略（1）
前端·css
一只小白菜~1 小时前
web浏览器环境下使用window.open()打开PDF文件不是预览，而是下载文件？
前端·javascript·pdf·windowopen预览pdf
方才coding1 小时前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建（module）
前端·javascript·vue.js
丶21361 小时前
【WEB】深入理解 CORS（跨域资源共享）：原理、配置与常见问题
前端·架构·web
发现你走远了1 小时前
『VUE』25. 组件事件与v-model（详细图文注释）
前端·javascript·vue.js
Mr.咕咕1 小时前
Django 搭建数据管理web——商品管理
前端·python·django
张张打怪兽1 小时前
css-50 Projects in 50 Days(3)
前端·css
热门推荐
01软件工程从理论到实践客观题汇总(头歌第一章至第八章)02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04VSCode插件 —— Cody AI （免费AI助手！）05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06Windows10安装PCL1.14.0及点云配准07Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO08文件或文件夹名称中有空格如何批量去除09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10【QuikGraph】C#调用第三方库实现迪杰斯特拉(Dijkstra)算法功能