本文参考守望轩小程序里的封装方法
守望轩 也是一个 开源的小程序 用wordpress 啥写的具体我也不清楚不过写的很好有意向可以去看看了解下,话不多说开始说内容。
“request” 发起网络请求,官网比我说的更清楚 啊哈哈 注：官方文档
image.png
给大家推荐一个好用的东西（调试接口）https://jsonplaceholder.typicode.com/ 里面有接口 及回调数据 基本够 练手 了
wx.request({
url: 'https://jsonplaceholder.typicode.com/users',
header: {
'content-type': 'application/x-www-form-urlencoded' // 默认值
},
method: 'GET', //请求方式
success: function(res) { // 成功回调
console.log(res)
},
fail: function(res) {},//请求失败回调
complete: function(res) {},// 成功 或失败都会回调
})
//请求成功后你会在控制台看到十条 用户信息 。
接口调用成功
请求（request）封装无外乎 将 url、data、success、fail一些 封装起来 。
/* 新建一个js文件 将下方代码复制进去 */
function wxPromisify(fn) {
return function (obj = {}) {
return new Promise((resolve, reject) => {
obj.success = function (res) {
//成功
resolve(res)
}
obj.fail = function (res) {
//失败
reject(res)
}
fn(obj)
})
}
}
//无论promise对象最后状态如何都会执行
Promise.prototype.finally = function (callback) {
let P = this.constructor;
return this.then(
value => P.resolve(callback()).then(() => value),
reason => P.resolve(callback()).then(() => { throw reason })
);
};
/**
* 微信请求get方法
* url
* data 以对象的格式传入
*/
function getRequest(url, data) {
var getRequest = wxPromisify(wx.request)
return getRequest({
url: url,
method: 'GET',
data: data,
header: {
'Content-Type': 'application/json'
}
})
}
/**
* 微信请求post方法封装
* url
* data 以对象的格式传入
*/
function postRequest(url, data) {
var postRequest = wxPromisify(wx.request)
return postRequest({
url: url,
method: 'POST',
data: data,
header: {
"content-type": "application/json"
},
})
}
module.exports = {
postRequest: postRequest,
getRequest: getRequest
}
复制完 注意下目录 我是将其放在utils目录下。在index.js 引用的
/*引用 创建的js文件*/
import Request from "../../utils/wxRequest.js";
var data = { // 不用data 参数
};
var url = app.globalData.https+'users'; //url
var getLikeRequest = Request.getRequest(url, data);
getLikeRequest.then(response => {
console.log(response)// 成功回调数据 将你需要的数据setdata渲染到页面就好
}).catch(res=>{
//失败回调
})
//跟上文对比 是不是比request 简洁了些 。
守望轩的小程序开源地址 https://github.com/iamxjb/winxin-app-watch-life.net
今天就到这喜欢的点个喜欢蟹蟹。
