TypeScript-axios模块进行封装的操作与一些想法

所谓封装与模块化,对我这种初学者来说,个人理解就是解耦,比如说,当我们前端一个项目使用了现在流行的模块,但是没有对其进行封装处理,包括一些相同的代码逻辑,把他们分散在各个组件当中,这样一来整个项目对于这个模块的耦合度太高.如果将来这个模块突然停止维护,或者有更好的模块将其替代,我们想要更换模块时就显得异常困难.

通过对axios封装的学习.我想把它记录在博客中,也算是学习过后加深理解

虽然代码只针对于axios,但是其中的思想却是最重要的,看得懂代码只是第一步,了解其背后的意图才是主要目的.

我的项目是基于vue3和TypeScript的,因此逻辑部分将使用ts实现.当然,这只是为了演示而进行的简单的封装

--------------------------下面是具体的操作步骤-------------------------------

---------------------第一步,编写核心的代码逻辑-------------------------------

首先我们在项目中新建一个request.ts的文件,用来导入axios,编写核心的逻辑(请求方法,返回内容的操作等)

import type { AxiosInstance, AxiosRequestConfig } from 'axios'
import axios from 'axios'

class KXRequest {
  instance: AxiosInstance

  constructor(config: AxiosRequestConfig) {
    this.instance = axios.create(config)
  }

  kxRequest(config: AxiosRequestConfig): void {
    this.instance.request(config).then((res) => {
      console.log(res)
    })
  }
}

export default KXRequest

使用class来使整个代码的封装性更强,

查看源码,发现axios.create(config)中的create方法需要传入一个类型为AxiosRequestConfig的参数,所以config的类型为AxiosRequestConfig

axios.create(config)执行后创建出来一个实例,这个实例的类型是AxiosInstance,为方便对返回值进行操作,新建一个instance变量,来储存axios.create(config)返回的结果,

所以instance的类型时AxiosStance类型的,

使用构造器的目的也是为了新建对象时对其中的instance进行初始化,并且要求使用这个类新建对象时传入的是AxiosRequestConfig类型的参数

然后使用instance进行下面的request操作

下面来分析request这个方法

 kxRequest(config: AxiosRequestConfig): void {
    this.instance.request(config).then((res) => {
      console.log(res)
    })
  }

这里的request是我们自定义了一个名为request的方法,(嗯,区分一下instance的request),这里就先考虑他没有返回值

instance因为是AxiosStance类型,该类型有request方法,该方法会返回一个promise对象(这都是源码中的内容,使用WebStorm可以按住CTRL键查看)

下面贴一段源码

request<T = any, R = AxiosResponse<T>> (config: AxiosRequestConfig): Promise<R>;

而instan的request方法又需要传入一个AxiosRequestConfig的config作为参数,所以我们在编写kxRequest方法时需要将config也传进来,然后进行相对应的操作即可,

第一步讲解完成,当然,再次申明,这只是简单的实现,重要的是思想

---------------------第二步,为封装的方法设立一个统一的出口-------------------------------

import KXRequest from './request'
import { BASE_URL, TIME_OUT } from './request/config'

const kxRequest = new KXRequest({
  baseURL: BASE_URL,
  timeout: TIME_OUT,
  headers: [],
})

export default kxRequest

这里new的KXRequest中的参数就是其实就是config,这段代码相当于是对第一段代码的代理,进行初始化操作

---------------------最后一步,在项目中使用-------------------------------

先来代码,

import { createApp } from 'vue'
import App from './App.vue'
import kxRequest from './service/index'

const app = createApp(App)
app.mount('#app')

kxRequest.kxRequest({
  url: '/home/multidata',
  method: 'GET',
})

我删除了不相关的代码.

首先导入将第二步导出的kxRequest在main.ts中导入

接着调用kxRequest的request方法即可.此时调用的kxRequest方法实际是第一步中的kxRequest,因为导入的第二步的代码实际是创建了第一步的实例

这样便完成了一个简单的封装,当然我会在未来的时间继续在下方更新更多操作