抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

一:为什么要对axios进行二次封装?

  • 隐藏axios的细节:axios是一个强大的HTTP请求库,但它也有一些繁琐的细节需要处理,比如处理请求的错误、请求超时,以及请求的拦截等。通过二次封装,我们可以将这些细节隐藏起来,使开发人员可以更加专注于业务逻辑的开发。
  • 统一处理请求和响应:通过二次封装,我们可以在请求之前或者响应之后做一些通用的处理,比如添加请求头、处理响应数据等。这样可以减少代码重复,提高开发效率。
  • 拦截请求和响应:提前对数据进行处理,例如访问对应页面需要token认证,就需要对请求头进行携带token

二:axios二次封装的使用

2.1 文件构建

image-20230810212508851

  • 在工程目录下的src下建立utils文件夹,放置对axios的二次封装请求

image-20230810212608102

  • utils同级目录下,建立api文件夹,统一放置对应封装的请求接口

2.2 对axios进行二次封装

request.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import axios from 'axios'

//利用axios.create方法创建一个axios实例
const request = axios.create({
baseURL: '', //请求基础路径设置
timeout: 5000 //超时的时间设置,超出5s请求就是失败
})

//请求拦截器
request.interceptors.request.use(config => {
return config
})

//响应拦截器
request.interceptors.response.use(
response => {
//响应拦截器成功的回调,一般会简化数据
return response.data
},
error => {
)

//对外暴露axios
export default request

2.3 封装请求接口

api文件下接口文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//引入二次封装axios
import request from '@/utils/request'


//枚举类型
enum API {
USERLOGIN = '/user/login'
}


//请求的二次封装
export const reqUserLogin = (params: any) =>
request<any>({
url: API.USERLOGIN,
method: 'post',
data: params
})

2.4 引入接口请求

login.ts

1
2
//引入接口
import { reqUserLogin } from '@/api/user/index'

评论