最近在做小程序的项目,里面用到了小程序的请求wx.request,示例代码如下:
wx.request({
url: 'test.php', // 仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data)
}
})
看上去是挺亲近的,不就是正常的ajax请求么,easy。。。
但是,作为一个有追求的coder,我们的目标是什么?(脱单,脱单,脱单) 错了错了,是优雅,优雅,优雅!!!
按照上面的写法很容易陷入 回调地狱 写出来的代码真的是又丑又长,这样怎么 脱单 ,不对 是优雅。
so,让我们优雅起来,这里我们使用 es6 的 promise 来将 wx.request 封装一下。
话不多说,,直接上代码:
/**
*
* @param {请求地址} url
* @param {请求方法,必须是大写} method
* @param {data:传入的参数,header:传入的头部,form:是否是表单元素,如果是传入true} param2
* 调用这个方法默认发送token
*/
const request = function(
url,
method = 'GET',
{ data, header, form = false} = {}
) {
var headers = null;
// 如果不是form表单
if (method === 'POST') {
if (!form) {
headers = Object.assign(
{},
{
'content-type': 'application/json;charset=utf-8'
},
header
);
}
}
// 如果是form表单
if (form) {
headers = Object.assign(
{},
{
'content-type': 'application/x-www-form-urlencoded'
},
header
);
}
return new Promise((resolve, reject) => {
wx.request({
url: url, // 开发者服务器接口地址",
data: data, // 请求的参数",
method: method, //请求方式
header: headers,
success: res => {
if (res.data.code == 0) { //服务器返回数据
resolve(res.data.data);
} else { //返回错误提示信息
reject( res.data.info );
}
},
fail: err => { //请求出错
reject(err);
},
complete: () => {}
});
});
};
export default request;
perfect 这样就封装完成了,使用的时候直接调用就好了。。
request(url, 'POST', {
data: {}
}).then(res => {
console.log(res);//正确返回结果
}).catch( (errMsg)=>{
console.log(errMsg);//错误提示信息
});
大功告成!!!