微信小程序封装网络请求和拦截器实战步骤

网友投稿 476 2023-11-12

−目录1. 前言2. 思路2.1 封装网络请求2.2 统一处理状态码2.3 封装-2.4 不同请求方式兼容2.5 全局存储用户登录信息2.6 完整代码3. 使用示例4. 注意事项5. 结语

1. 前言

今天和合作伙伴对接代码的时候，打开压缩包，发现项目有很大的问题，项目里根本没有登录验证请求封装-这些东西，在开发小程序时，无疑想要维护还是比较麻烦的，实际上我们通常需要封装网络请求和-，以实现统一处理状态码和存储用户登录信息等功能。这样可以提高开发效率，减少代码重复，同时也可以提高代码的可维护性和可读性。

2. 思路

微信小程序封装网络请求和-实战步骤

封装网络请求

首先，需要封装网络请求，负责发送请求和处理响应。该类应该包含以下方法：

·request(url, method, data, header)：发送网络请求，并返回响应结果。

·get(url, data, header)：发送 GET 请求。

·post(url, data, header)：发送 POST 请求。

等不同请求方式

可以使用小程序提供的 wx.request 方法来实现网络请求，该方法的参数与上述方法的参数一一对应。在处理响应时，可以使用Promise对象来处理异步操作。

统一处理状态码

可以创建一个checkStatus函数，用于统一处理状态码。该函数接受一个response参数，用于判断请求是否成功。如果请求成功，则返回一个Promise对象，以便于我们进行后续的操作。如果请求失败，则抛出一个错误。

创建 -类

具体处理逻辑见下文。

2.1 封装网络请求

封装一个request函数，用于发送请求。该函数接受一个参数options，用于配置请求。我们可以在该函数中使用小程序提供的wx.request接口发送请求，并在请求完成后返回一个Promise对象，以便于我们进行后续的操作。

?
1
2
3
4
5
6
7
8
9
10
11
12
function request(options) {
return new Promise((resolve, reject) => {
wx.request({
url: options.url,
method: options.method || GET,
data: options.data || {},
header: options.header || {},
success: resolve,
fail: reject
})
})
}

2.2 统一处理状态码

我们可以封装一个checkStatus函数，用于统一处理状态码。该函数接受一个response参数，用于判断请求是否成功。如果请求成功，则返回一个Promise对象，以便于我们进行后续的操作。如果请求失败，则抛出一个错误。

2.3 封装-

我们可以封装一个interceptor函数，用于封装-。该函数接受一个chain参数，用于执行-链。我们可以在该函数中定义一个requestInterceptor和一个responseInterceptor，用于分别处理请求和响应的-。我们可以在requestInterceptor中设置请求头，以便于在后续的请求中进行身份验证。我们可以在responseInterceptor中统一处理状态码，并在请求成功时更新用户登录信息。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function interceptor(chain) {
const requestInterceptor = (options) => {
// 设置请求头
options.header.Authorization = Bearer + getApp().globalData.token
return chain.request(options)
}
const responseInterceptor = (response) => {
const { statusCode, data } = response
if (statusCode >= 200 && statusCode < 300) {
// 更新用户登录信息
getApp().globalData.userInfo = data.userInfo
} else {
const error = new Error(`请求失败，状态码：${statusCode}`)
error.response = response
throw error
}
return response
}
return {
request: requestInterceptor,
response: responseInterceptor
}
}

2.4 不同请求方式兼容

?
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//封装put请求方式的代码如下：
function put(options) {
return new Promise((resolve, reject) => {
wx.request({
url: options.url,
method: PUT,
data: options.data || {},
header: options.header || {},
success: resolve,
fail: reject
})
})
}
//封装delete请求方式的代码如下：
function del(options) {
return new Promise((resolve, reject) => {
wx.request({
url: options.url,
method: DELETE,
data: options.data || {},
header: options.header || {},
success: resolve,
fail: reject
})
})
}
//封装post请求方式的代码如下：
function post(options) {
return new Promise((resolve, reject) => {
wx.request({
url: options.url,
method: POST,
data: options.data || {},
header: options.header || {},
success: resolve,
fail: reject
})
})
}

2.5 全局存储用户登录信息

我们可以在小程序的app.js中定义一个全局变量globalData，用于存储用户登录信息。我们可以在登录成功后将用户信息保存到该变量中，并在后续的请求中使用该变量进行身份验证。

?
1
2
3
4
5
6
App({
globalData: {
userInfo: null,
token: null
}
})

2.6 完整代码

?
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
// request.js
function request(options) {
return new Promise((resolve, reject) => {
wx.request({
url: options.url,
method: options.method || GET,
data: options.data || {},
header: options.header || {},
success: resolve,
fail: reject
})
})
}
function put(options) {
return new Promise((resolve, reject) => {
wx.request({
url: options.url,
method: PUT,
data: options.data || {},
header: options.header || {},
success: resolve,
fail: reject
})
})
}
function del(options) {
return new Promise((resolve, reject) => {
wx.request({
url: options.url,
method: DELETE,
data: options.data || {},
header: options.header || {},
success: resolve,
fail: reject
})
})
}
function post(options) {
return new Promise((resolve, reject) => {
wx.request({
url: options.url,
method: POST,
data: options.data || {},
header: options.header || {},
success: resolve,
fail: reject
})
})
}
function checkStatus(response) {
const { statusCode, data } = response
if (statusCode >= 200 && statusCode < 300) {
return Promise.resolve(data)
} else {
const error = new Error(`请求失败，状态码：${statusCode}`)
error.response = response
throw error
}
}
function interceptor(chain) {
const requestInterceptor = (options) => {
options.header.Authorization = Bearer + getApp().globalData.token
return chain.request(options)
}
const responseInterceptor = (response) => {
const { statusCode, data } = response
if (statusCode >= 200 && statusCode < 300) {
getApp().globalData.userInfo = data.userInfo
} else {
const error = new Error(`请求失败，状态码：${statusCode}`)
error.response = response
throw error
}
return response
}
return {
request: requestInterceptor,
response: responseInterceptor
}
}
export { request, put, del, post, checkStatus, interceptor }

3. 使用示例

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { request, interceptor, checkStatus } from ./request
const chain = interceptor({
request: (options) => {
console.log(请求-)
return options
},
response: (response) => {
console.log(响应-)
return response
}
})
request({
url: https://xxx.com/api/users,
method: GET
})
.then(checkStatus)
.then(data => {
console.log(data)
})
.catch(error => {
console.log(error)
})

4. 注意事项

① 在使用-时，需要注意-的执行顺序。在上述示例中，-的执行顺序是先执行请求-，再执行响应-。

② 在小程序中，我们可以使用getApp()函数来获取小程序实例，从而访问全局变量。

③ 在发送请求时，需要注意请求的参数配置。在上述示例中，默认使用的是GET请求方法和空对象作为请求参数，并且配置了常用请求方式，如果需要使用其他请求方法或者自定义请求参数，请在调用request函数时进行相应的配置。

5. 结语

实际上请求的url地址也可以单独封装的，需要单独新建一个js文件里面导出域名或者url地址，再调用request封装的地方，import引入一下就可以了，以上便是关于小程序封装网络请求和-的全部内容，希望可以帮到有需要的小伙伴。欢迎大家多多交流，共同进步~

您可能感兴趣的文章:微信小程序网络请求模块封装的具体实现微信小程序中网络请求缓存的解决方法微信小程序网络请求实现过程解析微信小程序中如何使用flyio封装网络请求封装微信小程序http-过程解析微信小程序wx.request-使用详解微信小程序之页面-的示例代码

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 判断
上一篇:微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
下一篇:微信小程序实现页面浮动导航
相关文章

 发表评论

暂时没有评论，来抢沙发吧~