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

所谓封装与模块化,对我这种初学者来说,个人理解就是解耦,比如说,当我们前端一个项目使用了现在流行的模块,但是没有对其进行封装处理,包括一些相同的代码逻辑,把他们分散在各个组件当中,这样一来整个项目对于这个模块的耦合度太高.如果将来这个模块突然停止维护,或者有更好的模块将其替代,我们想要更换模块时就显得异常困难.
通过对axios封装的学习.我想把它记录在博客中,也算是学习过后加深理解
虽然代码只针对于axios,但是其中的思想却是最重要的,看得懂代码只是第一步,了解其背后的意图才是主要目的.
我的项目是基于vue3和TypeScript的,因此逻辑部分将使用ts实现.当然,这只是为了演示而进行的简单的封装

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

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

import type { AxiosInstance, AxiosRequestConfig } from 'axios' import axios from 'axios'class KXRequest { instance: AxiosInstanceconstructor(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> (config: AxiosRequestConfig): Promise;

而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,因为导入的第二步的代码实际是创建了第一步的实例

【TypeScript-axios模块进行封装的操作与一些想法】这样便完成了一个简单的封装,当然我会在未来的时间继续在下方更新更多操作