本文详细介绍如何在微信小程序中利用ES6的Promise特性封装原生wx.request接口。通过创建fetch、api和http三个模块，实现网络请求的统一管理与集中调用，从而简化代码结构，提升开发效率与用户体验。
上篇文章介绍了基于Promise封装小程序wx.request的实现思路，本文将重点阐述具体的封装方法。
为什么要封装wx.request？
在实际开发中，调用多个接口API时，若不使用封装，代码编写将变得繁琐且可能引发性能问题。
通过封装，可以简化代码编写，提升用户体验，并便于后续代码的维护与修改。
对于封装的选择为什么使用promise？
在微信小程序开发中，wx.request 的调用方式与 jQuery 的 $.ajax 类似。鉴于 $.ajax 的封装已广为人知，且微信小程序支持 ES6 语法，利用 Promise 进行封装是一个理想的选择。
该怎么封装wx.request？
明确了封装理由与工具后，接下来针对wx.request进行具体封装。首先在开发工具中创建相关文件。
使用一个大文件夹包裹内容，并对各部分进行分工处理。
首先在fetch.js文件中，利用Promise对wx.request进行封装：
//promise封装wx.request
module.exports=(url,data,method)=>{
//先定义promise
let promise=new Promise((resolve,reject)=>{
wx.request({
url:url,
data:data,
method:method,
//成功时执行
success(res){
resolve(res)
},
//失败时执行
fail(err){
reject(err)
},
})
})
//将promise推出去
return promise
}随后，在api.js文件中集中存放所有需要请求的接口配置，以便统一管理：
//接口的管理
module.exports={
"banner":"/h8/home/multidata"
}最后，在http.js文件中将上述模块集中起来使用：
//引入文件
const api=require("./api")
const fetch=require("./fetch")
//定义路径
let baseUrl="http://123.207.32.32:8000/api"
//导出内容
function banner(){
return fetch(baseUrl+api.banner,{},'get')
}
module.exports={
banner
}封装完成后，需在全局app.js文件中引入方可使用：
const http=require('./http/http.js')
App({
http,
})在具体页面文件中使用示例：
//引入app
const app=getApp()
Page({
data: {
list:[]
}
onLoad: function () {
app.http.banner().then(res)=>{
this.setData({
list:res.data.data.banner.list
})
}
}至此，关于使用Promise封装wx.request的方法介绍完毕。如需了解更多相关内容，可搜索本站往期文章或继续阅读后续文章，感谢支持！