失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 小程序promise封装post请求_Promise封装微信小程序的Request请求

小程序promise封装post请求_Promise封装微信小程序的Request请求

时间:2018-07-21 16:29:52

相关推荐

小程序promise封装post请求_Promise封装微信小程序的Request请求

回调地狱一向是影响开发和维护的症结所在,无数个success()的嵌套再嵌套,导致代码层级颇深,盘一次逻辑都要费劲千辛万苦,ES6语法中的Promise,便是专为解决JS中异步请求回调的信任问题而存在的,结合小程序目前提供的API支持,可以用Promise将其进行简单封装,优化性能体验。具体代码如下(注意看注释):

1. 首先在公共的util.js(或者自己创建的公有JS文件)中加入如下方法:

/**

* wxPromisify 使用promise封装request请求

* @fn 传入的函数,如wx.request、wx.download

*/

function wxPromisify(fn) {

return function(obj = {}) {

return new Promise((resolve, reject) => {

obj.success = function(res) { //网络通畅,请求发送成功

console.log(res)

if (res.data.code == 200) { //判断后台返回的状态码,若是成功,返回resolve()

return resolve(res)

} else { //若是返回错误的状态码,弹窗提示失败信息,并附带错误代码,以便快速定位问题所在

wx.showModal({

title: res.data.msg,

content: "错误码:" + res.data.code,

showCancel: false,

})

}

}

obj.fail = function(res) { //网络阻塞,请求发送失败,显示错误提示

showError() //此函数在下面定义,用于打印错误信息

return reject(res)

}

fn(obj) //执行函数,obj为传入函数的参数

})

}

}

/**

* 加载超时后显示网络错误提示

* 当前设置为等待2.5秒,若超时后仍未返回请求结果,弹窗提示网络错误

* @param 传入一个Promise对象

*/

function racePromise(proRequest){

return Promise.race([

proRequest,

new Promise(function (resolve, reject) {

setTimeout(() => reject(), 2500)

})

])

}

/**

* 弹窗提示网络错误

*/

function showError(){

wx.showModal({

title: '加载失败',

content: '请检查网络连接',

showCancel: false,

})

}

最后将方法导出:

module.exports = {

URL: "https://...", //具体的请求地址头

wxPromisify: wxPromisify,

racePromise: racePromise,

showError: showError,

}

2. 在wxml中进行调用,首先在Page上方引入util.js文件,并封装部分方法:

const util = require('../../utils/util.js')

//调用util.js里写好的方法,将小程序原生的request方法包装成一个Promise对象

//这里也可以传入其他原生请求,如wx.getSystemInfo、wx.getUserInfo、wx.login等,但需要将util.js里的‘判断状态码’这一步删掉

const proRequest = util.wxPromisify(wx.request)

然后在方法里进行调用,发送请求:

/**

* 通过code获取用户openid

*/

getOpenid(code) {

var that = this; //个人习惯,为避免this指向出错,函数前必加

util.racePromise(proRequest({

url: util.URL + "...?code=" + code, //请求地址

method: 'POST', //函数方法

})).then(res => { //!!!注意括号的个数!!!

/* ... */ //若是请求成功,执行后续处理和操作 res是请求响应的结果

}).catch(res => { //若是请求超时,则catch进行捕获,弹窗提示网络错误

util.showError()

})

},

以上便是简单的封装方法,并处理了基本错误,后续可以根据需求添加Promise.all等方法,完善业务逻辑。

如有不妥之处,万望指正!

如果觉得《小程序promise封装post请求_Promise封装微信小程序的Request请求》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。