前端项目开发技巧-使用TypeScript二次封装Axios

Sjkuu2al

已于 2023-07-01 14:59:31 修改

阅读量851

点赞数

CC 4.0 BY-SA版权

分类专栏：前端技巧文章标签：前端 typescript ajax 前端框架 javascript

于 2023-06-30 17:08:05 首次发布

本文链接：https://blog.csdn.net/viviid/article/details/131466773

文章介绍了如何用TypeScript对Axios进行二次封装，创建http.ts和commonHttp.ts文件，配置拦截器和安全设置。在Vue3项目中，通过getCurrentInstance()获取代理并调用封装后的请求方法，简化网络请求过程。同时，封装提供了统一的错误处理和回调功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、概要

文章介绍了如何使用TypeScript来二次封装Axios，以规范项目前端开发流程中不同成员在网络请求以及一些对于请求安全的配置，同时也便于后期审阅与修改

二、用法展示

封装后端api

第一步引入封装好的req文件
根据实际接口进行模板封装，模板如下

// params将会自动识别为get方法的参数，data则是其余类似POST方法的参数
export let 接口名称 = (params:object,data:obejct) => {
   
   
	return req.request({
   
   
		method:'方法类型',
		url:'接口地址',
		data?  post等方法参数
		params? put方法参数
		headers? 请求头配置(如Content-type)
	})
}

在vue文件中根据js文件导出的名称引用即可

.vue文件中进行网络请求

让我们只关注重要的逻辑代码

因为Vue3中我们不能在setup函数中调用this，因此我们可以借助Vue官方给予的一个接口getCurrentInstance()来获取当前页面代理

const {
   
    proxy }: any = getCurrentInstance()

拥有了proxy后我们就可以正式进行网络请求了，首先让我们明确调用接口所需的参数(如下图中的data),然后只需填充下面这个模板就能够成功进行网络请求了！

proxy.$cHttp({
   
   
	func:请求方法【就是我们封装好的后端接口】[必填],
	data/params：接口所需的参数[可选]
	success：成功回调[可选]  ，
	....
})

只用简单的两步，我们就成功的发送了我们的网络请求！但其实这次封装的功能远不止这么简单！！
在这里插入图片描述

三、技术细节

我们一共要封装出两个文件http.ts与commonHttp.ts(这两个文件可以自己命名),其中http.ts用在第一次封装axios，其细节在于对网络请求进行拦截器的配置与一些安全设置相关的内容。commonHttp.ts用于规范我们的请求格式，包括对请求接口的确定，请求成功回调，失败回调等…

不难发现commonHttp其实是我们上述实例中$cHttp的全程，当然这两个名字你也可以diy！

http.js

我们构造一个Request类，该类的本质其实就是axios，我们只是通过这个类初始化一些对axios的配置
我们可以通过构造函数来定制一些项目中的请求约束，例如携带token进行请求等

import config from '../config'
import axios, {
   
    AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import VueCookies from 'vue-cookies'
const Cookies: any = VueCookies
class Request {
   
   
	instance: AxiosInstance
	baseConfig: AxiosRequestConfig = {
   
   
		baseURL: config.