微信小程序封装wx.request():基于Promise的最佳实践与代码实现
本文详细解析如何在微信小程序中利用Promise对原生wx.request进行封装。针对原生API存在的回调地狱、代码冗余及可维护性差等问题,提供抽取共性参数的封装思路。通过构建统一的request.js模块及业务接口文件,实现代码复用与优雅调用,附带完整示例代码供参考。
原生wx.request()存在若干局限性。
参考微信小程序官方文档说明。
- 容易引发回调地狱,出现多层success嵌套调用的情况(可通过Promise封装解决)。
- 执行效率较低,代码结构冗杂,每次请求均需重复编写公共参数(如headers、基础url等)。
- 代码可维护性较差,后续查看与修改不便;封装后逻辑集中于同一文件,结构清晰明了。
wx.request({
url: 'example.php', //仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
作为专业前端开发者,出于对代码质量与可维护性的考量(而非单纯为了偷懒),应当对这类代码进行封装,从而使整体代码更加优雅。
封装的核心思路。
所有封装逻辑(无论是组件还是业务代码)的核心原则可总结为:抽取共性。
分析网络请求代码可以发现,其中存在大量重复部分,例如公共请求路径、统一错误处理机制以及headers参数(如token传递)。差异部分则包括具体接口地址、请求类型及请求参数。在封装过程中,我们将相同部分提取至独立文件,针对不同之处通过传参方式处理。
具体实现代码步骤。
首先创建api文件夹(名称可自定义,但建议规范化),并在该目录下新建文件request.js。
// ----http----
// api URL
const apiUrl = "https://接口地址:端口";// 公共的请求地址
// 封装微信请求方法
const request = (params) => {
let url = params.url;
let data = params.data;
let method = params.method;
let header = {
"Content-Type": "application/json"
};
// 鉴权验证,获取登录之后后端返回的token,存在即在头部Authorization写token,具体的看后端需求
if (wx.getStorageSync("token")) {
// header.Authorization = wx.getStorageSync("token");
header.token = wx.getStorageSync("token");
}
return new Promise((resolve, reject) => {
wx.request({
url: apiUrl + url, // api url
method: method, // get/post
data: data, // 请求参数
header: header, // 头部
success(res) {
// 请求成功
// 判断状态码---errCode状态根据后端定义来判断
if (res.statusCode < 399) {
if (res.data.Code === 401) {
wx.showModal({
title: "提示",
content: "请登录",
showCancel: false,
success(res) {
wx.navigateTo({
url: "/pages/login/login",
});
},
});
reject(res.data);
}
resolve(res.data);
} else {
// 其他异常
switch (res.statusCode) {
case 404:
wx.showToast({
title: '未知异常',
duration: 2000,
})
break;
default:
wx.showToast({
title: '请重试...',
duration: 2000,
})
break;
}
reject("未知错误,请稍后再试");
}
},
fail(err) {
if (err.errMsg.indexOf('request:fail') !== -1) {
wx.showToast({
title: '网络异常',
icon: "error",
duration: 2000
})
} else {
wx.showToast({
title: '未知异常',
duration: 2000
})
}
reject(err);
},
complete() {
wx.hideLoading()
},
});
});
};
module.exports = {
apiUrl,
request,
}
随后根据具体业务需求,对特定接口地址进行封装。例如,在api文件夹下再新建user.js文件,用于存放登录、注册等方法,其请求类型和参数依据接口文档编写。
import {
request
} from "./request"
// 用户相关
// 登录
export const login = (params) => {
return request({
url: '/user/login',
data: params,
method: 'POST',
})
}
// 注册
export const register = (params) => {
return request({
url: '/user/reg',
data: params,
method: 'POST',
})
}
在项目正式使用时的调用方式:
import {
login
} from '../../../api/user'
// 点击登录的方法
handleLogin(){
login({
name: xxx,
password: xxx,
}).then((res) => {
if (res.code == 200) {
// 登录成功之后的处理
} else {
// 登录失败的处理
}
}).catch((res) => {})
}
总结。
至此,关于微信小程序如何使用Promise对wx.request()封装的文章介绍完毕。如需了解更多相关内容,请搜索本站历史文章或继续浏览后续文章,感谢支持!
JavaScript怎么准确判断数据类型:typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比:灵活性 vs 开发效率
2026-11-05 09:45:01
