基于Axios二次封装请求库,带你重构面试亮点(一)

简介: 基于Axios二次封装请求库,带你重构面试亮点

引言


在前面两篇文章中得到反馈效果不错,今天继续出第三篇,以二次封装axios为例

在我以往的面试中,听到候选人最多的就是项目中二次封装axios,但是当真正深入挖掘,往往得不到有用的信息。 那么面试官是想听到什么样的亮点呢?这篇文章我们重点分析一下,并且也可以封装自己的axios请求库。


需求


在项目中,我们可能存在这些痛点:

  • 接口统一管理
  • 支持多host问题
  • 支持区分env
  • 支持restful风格
  • 支持取消请求
  • 支持接口错误重试
  • 支持缓存
  • 支持限流


请求方法的统一封装


export class  Apis{
  public common: RequestOptions;
  // 默认的server配置
  public base!: string;
  // server服务的集合
  public serverMap: ServerMap;
  // 对象形式的请求方法集合
  public apiMap: ApisMap;
  // 挂载所有请求方法的集合对象
  public apis: ApisInstance;
  // axios实例化对象
  public instance: AxiosInstance;
  constructor(common?: RequestOptions, serverMap?: ServerMap, apiMap?: ApisMap) {
  }
  public get<T extends Record<string, any> = any>(url: string, request: RequestOptions): Promise<RestyResponse<T>> {
    request = { ...request, method: 'GET' };
    return this.request(url, request);
  }
  public delete<T extends Record<string, any> = any>(url: string, request: RequestOptions): Promise<RestyResponse<T>> {
    request = { ...request, method: 'DELETE' };
    return this.request(url, request);
  }
  public post<T extends Record<string, any> = any>(url: string, request: RequestOptions): Promise<RestyResponse<T>> {
    request = { ...request, method: 'POST' };
    return this.request(url, request);
  }
  public put<T extends Record<string, any> = any>(url: string, request: RequestOptions): Promise<RestyResponse<T>> {
    request = { ...request, method: 'PUT' };
    return this.request(url, request);
  }
  public patch<T extends Record<string, any> = any>(url: string, request: RequestOptions): Promise<RestyResponse<T>> {
    request = { ...request, method: 'PATCH' };
    return this.request(url, request);
  }
  public request<T extends Record<string, any> = any>(url: string, request: RequestOptions): Promise<RestyResponse<T>> {
    const rest = request.rest || {};
    let path = url;
    if (Object.keys(rest).length) {
      path = this.restful(url, rest);
    }
    // 合并公共配置
    const options = { ...this.common, ...request };
    return this.instance.request({
      ...options,
      url: path,
    });
  }
}


接口统一管理


在项目中,实际每个请求的写法都是一样的,开发过程中,我不想在每个页面都重复写请求方法,我想通过JSON配置的方式做接口统一管理,比如:

在Home Module下,新建apis.ts文件:

export default {
  getBaseInfo: {
    method: 'get',
    url: '/base/get'
  },
  getBaseRestInfo: {
    method: 'get',
    url: '/base/info'
  }
}

实现:

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import {
  ApisMap,
  ServerMap,
  ApisInstance,
  ApisConfig,
  ResolvedFn,
  RejectedFn,
  Middleware,
  Rest
} from './types'
class Apis {
  base: string
  serverMap: ServerMap
  apiMap: ApisMap
  instance: ApisInstance
  axiosInstance: AxiosInstance
  constructor(serverMap: ServerMap, apiMap: ApisMap, common?: AxiosRequestConfig) {
    /**
     * 支持公共配置
     */
    this.axiosInstance = axios.create(common)
    this.serverMap = serverMap
    this.apiMap = apiMap
    this.instance = {}
    this.base = this.getDefault()
    this.combine2Request()
  }
  /**
   * 获取默认的配置
   */
  getDefault(): string {
    let base = ''
    for (const key of Object.keys(this.serverMap)) {
      /**
       * 找到默认的配置值
       */
      if (this.serverMap[key].default) {
        base = key
      }
    }
    if (!base) {
      console.error('apis: 找不到默认服务器配置')
    }
    return base
  }
  combine2Request(): void {
    for (const key of Object.keys(this.apiMap)) {
      this.instance[key] = (config?: ApisConfig) => {
        let result: ApisConfig = this.apiMap[key]
        if (config) {
          result = this.rest2Combine(this.apiMap[key], config)
        }
        return this.axiosInstance.request(result)
      }
    }
  }
}
export default createInstance


支持多host


应用可能需要跟多个服务交互,这时候涉及多host,我们想统一处理:

  • 定义serverMap
  • serverMap对象定义了两个服务:baseServerapi-test
  • 对于每个服务,都提供了一个baseMap对象来描述不同环境下的base URLs。
  • baseServer有一个default属性设置为true,表示它可能是默认选择的服务器。
  • 定义apiMap
  • apiMap对象定义了两个API:getBaseInfogetBaseRestInfo
  • 每个API都有一个HTTP方法(method)和一个URL路径(url)。
import createInstance from 'apis'
import { ApisMap } from 'apis/types'
const serverMap = {
  baseServer: {
    baseMap: {
      localprod: '',
      prod: 'https://wwww.baidu.com',
      stage: 'https://wwww.baidu.com',
      test: 'https://wwww.baidu.com',
      dev: 'https:/wwww.baidu.com',
      local: 'http://127.0.0.1:4320',
      baseURL: 'https://localhost:8080'
    },
    default: true
  },
  'api-test': {
    baseMap: {
      localprod: '',
      prod: 'https://www.baidu.com',
      stage: 'https://www.baidu.com',
      test: 'https://www.baidu.com',
      dev: 'https:/www.baidu.com',
      local: `http://127.0.0.1:4320`,
      baseURL: 'https://localhost:8080'
    }
  }
}
const apiMap: ApisMap = {
  getBaseInfo: {
    method: 'get',
    url: '/base/get'
  },
  getBaseRestInfo: {
    method: 'get',
    url: '/base/get/:id/kill/:test'
  }
}
let apis = createInstance(serverMap, apiMap)
apis.getBaseInfo({ params: { name: 'linwu' } }).then(res => {
  console.log(res)
})

实现

   /**
   * 给个请求
   * 配置正确的baseURL
   * 如果没有baseURL就读默认的
   */
  formatConfigUrl(): void {
    for (const key of Object.keys(this.apiMap)) {
      const item = this.apiMap[key]
      if (!item.server) {
        item.server = this.base
      }
      this.apiMap[key] = { ...this.serverMap[item.server], ...item }
    }
  }

目录
相关文章
|
2月前
|
资源调度 JavaScript 前端开发
vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用
这篇文章是关于如何在Vue项目中使用axios进行网络请求、二次封装axios以及使用mockjs模拟响应数据的教程。
89 1
vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用
|
2月前
|
缓存 JavaScript 搜索推荐
|
1月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
47 2
|
2月前
|
Python
axios的get请求传入数组参数
【10月更文挑战第11天】 当使用 `axios` 发送包含数组参数的 GET 请求时,默认的序列化方式可能与后端(如 Django)不兼容,导致无法正确获取数组参数。解决方案是通过 `paramsSerializer` 指定自定义序列化函数,或使用 `qs` 库来格式化数组参数,确保前后端一致。示例代码展示了如何使用 `qs` 库设置 `arrayFormat` 为 `&quot;repeat&quot;`,以符合 Django 的解析要求。
54 2
|
2月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第8天】
137 1
|
2月前
|
JSON JavaScript 前端开发
axios的post请求,数据为什么要用qs处理?什么时候不用?
axios的post请求,数据为什么要用qs处理?什么时候不用?
|
2月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第5天】
162 1
|
2月前
|
前端开发 JavaScript API
自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南
自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南
85 0
|
2月前
|
前端开发 JavaScript UED
axios取消请求CancelToken的原理解析及用法示例
axios取消请求CancelToken的原理解析及用法示例
120 0