封装axios的两种方式

简介: 封装axios的两种方式

作为前端工程师,经常需要对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

完整的代码如下所示:

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赋值到相应的字段中。
  • 添加请求拦截器,并在成功和失败的情况下返回配置。
  • 添加响应拦截器,并在成功和失败的情况下返回处理结果。
  • 构造请求成功的回调函数,对返回数据进行格式化的操作。
  • 构造请求失败的回调函数,处理错误日志和断网情况。
  • 发送请求并将请求结果作为函数的返回值。
  1. 默认导出req对象。

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

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;

给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:web前端面试题库

相关文章
|
3天前
|
JavaScript
vue封装axios(用interceptors封装)
vue封装axios(用interceptors封装)
13 0
|
3天前
|
前端开发
Axios request 封装技巧:提升代码复用和效率的步骤
在开发中,为了提高效率,通常对 Axios 进行封装,简化了请求的发送和对响应的处理。同时,统一错误处理机制有助于维护代码的清晰和一致性。本文介绍了一些高效封装 Axios 请求的方法。
Axios request 封装技巧:提升代码复用和效率的步骤
|
3天前
|
缓存 前端开发 JavaScript
前端vue3分享——项目封装axios、vite使用env环境变量
前端vue3分享——项目封装axios、vite使用env环境变量
25 0
|
3天前
|
存储 算法 JavaScript
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
今天这篇文章,主要是讲述对axios封装的请求,由于部分请求可能存在延时的情况。使得接口可能存在会被持续点击(即:接口未响应的时间内,被持续请求),导致重复请求的问题,容易降低前后端服务的性能!故提出给axios封装的配置里面,新增一个防抖函数,用来限制全局请求的防抖。
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
|
3天前
|
JSON JavaScript 前端开发
< 每日份知识快餐:axios是什么?如何在Vue中 封装 axios ? >
本文介绍了前端开发中常用的HTTP客户端库Axios,它基于Promise,支持浏览器和Node.js,特点是功能强大、支持Promise API和并发请求,并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性,不仅讲解了基本的安装、导入和使用方法,还阐述了为何选择Axios,包括其丰富的配置选项和良好的浏览器支持。此外,文章探讨了封装Axios的必要性,以减少重复代码和提高代码维护性,并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装,开发者可以更高效地管理和使用Axios,适应不同项目需求。
|
3天前
axios封装和配置
axios封装和配置
20 0
|
3天前
04_装饰器封装axios_get请求
04_装饰器封装axios_get请求
30 0
|
3天前
|
前端开发
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
|
3天前
|
资源调度 JavaScript API
|
3天前
|
JSON 前端开发 JavaScript
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
89 0