前言
在微信小程序中封装请求API是一个常见的做法,这有助于减少代码冗余并提高代码的可维护性。以下是一个简单的封装示例:
-
创建封装函数
您可以在小程序的某个文件中创建一个名为
request
的函数,该函数接受一个url
和一个data
对象作为参数,并返回一个Promise
。 -
发起网络请求
使用
wx.request
方法发起网络请求,并在成功和失败时分别调用resolve
和reject
方法。 -
处理响应数据
根据需要对响应数据进行处理,例如,您可以将JSON格式的数据转换为JavaScript对象。
-
错误处理
您还应该在请求失败时进行适当的错误处理,例如,显示一个错误消息或执行其他错误恢复操作。
以下是一个基本的请求封装示例:
function request(url, data = {}, method = 'GET') {
return new Promise((resolve, reject) => {
wx.request({
url: url,
data: data,
method: method,
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
resolve(res.data);
},
fail(err) {
reject(err);
}
});
});
}
在这个例子中,request
函数接受三个参数:url
(请求的URL),data
(发送的数据,默认为空对象),和method
(请求方法,默认为'GET')。函数内部使用wx.request
发起请求,并在请求成功时解析响应数据,在请求失败时抛出错误。
要使用这个封装的请求函数,您可以像下面这样调用它:
request('https://api.example.com/data', { key: 'value' })
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});
这只是一个基本示例,您可能需要根据您的具体需求对其进行修改和扩展。例如,您可能希望添加对不同HTTP方法的支持,或者添加自定义的错误处理逻辑。
比如你还可以像下面这样继续扩展封装:
参照原生的微信小程序的请求格式,封装增加一些简单的功能,如果需要按照promise的方式来封装,请参考:
微信小程序-封装请求API——promise方式_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120451986
export const cjRequest = (parmas) => {
let url = parmas.url, //请求url
data = parmas.data || undefined, //请求参数
success = parmas.success || function () { }, //成功后的回调函数
fail = parmas.fail || function () { }, //成功后的回调函数
complete = parmas.complete || function () { }, //完成后的回调函数
method = parmas.method || 'GET', //请求方式
header = parmas.header || 'application/json', //请求头
getUserInfo = parmas.getUserInfo || 0 //是否获取用户数据 1表示没授权过,需要去授权
//判断是否要求获取用户数据并且判断是否已经存储过用户信息
//如果getUserInfo=1并且没有存储过用户信息 则跳转到授权页面
if (getUserInfo && !wx.getStorageInfoSync('userInfo')) {
console.log('未授权,跳转授权页面');
wx.navigateTo({
url: '/pages/user/getUserInfo'//跳转到授权页面
})
}
//请求数据
wx.request({
url,
method,
data,
header,
success,
fail,
complete
})
/**
*! 要用的页面中的 调用方法
//引入封装的请求api
import request from "../../utils/request.js"//引入request
onLoad: function() {
//使用封装的api,传入参数
cjRequest({
method:'get',
url: 'https://www.baidu.com',
data:{},
header:{},
getUserInfo: 1, //需要授权
success(res) {
console.log(res);
....
},
fail(err) {
console.log(err);
....
},
complete(res) {
console.log(res);
....
}
})
}
*
*/
}
参考格式:colorUI的社区讨论
小程序如何实现AOP · 语雀 (yuque.com)https://www.yuque.com/colorui/colorui/me28gb
博主 [DTcode7] 带您 溺亖在知识的海洋里,嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客🐒《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》《photoshop相关博客》
😚 吾辈才疏学浅,摹写之作,恐有瑕疵。望诸君海涵赐教。望轻喷,嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益,纵其简陋未及渊博,亦足以略尽绵薄之力。倘若尚存阙漏,敬请不吝斧正,俾便精进!