【axios学习笔记】二次封装axios
2023-09-27 14:26:51 时间
【axios学习笔记】二次封装axios
写在前面
🤗这里是前端程序员小张!
🌻人海茫茫,感谢这一秒你看到这里。希望我的文章对你的有所帮助!
🌟愿你在未来的日子,保持热爱,奔赴山海!
一、Axios几个常用类型
在使用TypeScript
封装Axios
之前我们先来看看Axios
几个重要的类型。
-
AxiosRequestConfig
-
AxiosRequestConfig
是我们使用axios
发送请求传递参数的类型。当然它也是我们请求拦截器里面的参数类型。
-
-
AxiosInstance
-
AxiosInstance
是我们使用axios
实例对象类型。 -
我们使用
axios.create(config?: AxiosRequestConfig)
创建出来的对象都是AxiosInstance
类型
-
-
AxiosResponse
-
AxiosResponse
是非常重要的,我们的axios
请求返回值类型都是AxiosResponse
类型; -
AxiosResponse
是一个接口泛型,这个泛型会应用到后端返回的data
上; -
可以根据后端接口返回定义不同的类型传递进去
-
二、axios的二次封装
不过随着项目规模增大,如果每发起一次HTTP请求,就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作,都就地写一遍。这种重复劳动不仅浪费时间,而且让代码变得冗余不堪,难以维护。
目的:
- 方便api统一管理
- 不管接口有多少,所有的接口都可以非常清晰,容易维护;
1.1 基础封装
首先我们实现最基本的封装:
import axios from 'axios'
import type { AxiosInstance, AxiosRequestConfig } from 'axios'
class XZRequest {
instance: AxiosInstance
// request实例 => axios的实例
constructor(config: AxiosRequestConfig) {
//每个实例的请求配置不同,传入的配置也就不同
//通过axios(config)方式实现任意类型请求的方式
this.instance = axios.create(config)
}
// 封装网络请求的方法
request(config: AxiosRequestConfig) {
return this.instance.request(config)
}
}
export default XZRequest
封装为一个类的原因是因为类可以创建多个实例,适用范围更广,封装性更强一些。
1.2 添加拦截器
- 添加请求拦截器(前端给后端的参数)
- 添加响应拦截器(后端给前端的数据)
constructor(config: AxiosRequestConfig) {
this.instance = axios.create(config)
this.instance.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么
console.log('请求成功的拦截')
return config
},
(err) => {
// 对请求错误数据做些什么
console.log('请求失败的拦截')
return err
}
)
// 添加响应拦截器
this.instance.interceptors.response.use(
(res) => {
//对响应数据做些什么
console.log('响应成功的拦截')
return res
},
(err) => {
//响应失败做些什么
console.log('响应失败的拦截')
return err
}
)
}
1.3 常用方法封装
在基础封装的时候我们封装了一个request
通用方法,其实我们还可以更具体的封装get、post、put、delete
方法,让我们使用更方便。
get(config: AxiosRequestConfig) {
return this.instance.request({ ...config, method: 'GET' })
}
post(config: AxiosRequestConfig) {
return this.instance.request({ ...config, method: 'POST' })
}
delete(config: AxiosRequestConfig) {
return this.instance.request({ ...config, method: 'DELETE' })
}
patch(config: AxiosRequestConfig) {
return this.instance.request({ ...config, method: 'PATCH' })
}
此时我们就可以构造不同的axios请求
// 统一出口
import XZRequest from './request/index'
import { BASE_URL, TIME_OUT } from './config/index'
const Request = new XZRequest({
baseURL: BASE_URL,
timeout: TIME_OUT
})
export default Request
xzRequest.request({
url: ' ',
method: 'GET'
})
相关文章
- Javascript 面向对象编程(一):封装
- 微服务架构中,二次浅封装实践
- 【C#】对异步请求处理程序IHttpAsyncHandler的理解和分享一个易用性封装 【手记】走近科学之为什么明明实现了IEnumerable<T>的类型却不能调用LINQ扩展方法 【手记】手机网页弹出层后屏蔽底层的滑动响应 【手记】ASP.NET提示“未能创建类型”处理 【Web】一个非常简单的移动web消息框 【手记】解决EXCEL跑SQL遇“查询无法运行或数据库表无法打开...”
- JXL.jar简单封装Excel读写操作
- weex stream 方法封装
- axios二次封装
- 类 7.2访问控制与封装 笔记
- PHP 开发 APP 接口 学习笔记与总结 - JSON 方式封装通信接口
- 介绍几个工作开发中封装的好用的android自定义控件
- macOS SwiftUI 封装组件之日期选择器图形日历和钟表模式NSDataPicker (教程含源码)
- Jquery封装: WebSocket插件
- input框过滤非数字/去掉数字前的0/单独的0不用过滤---运用model封装组件
- C#Web异步操作封装
- JS学习笔记-OO疑问之封装
- iOS - 用Masonry封装的slider,完全支持Masonry的适配
- 记录python接口自动化测试--把操作excel文件的方法封装起来(第五目)
- JAVA封装 包
- 记录一下 Java 代码实现文件夹、文件的对比,主要包含 word、pdf、文本、图片等相关文件的对比计算,以及计算文本的相似率(重复率)、筛选出差异的文件、方便文件和文档的去重,并封装为jar包