用 promise 封装小程序中的 wx.request

最近在做小程序的项目,里面用到了小程序的请求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);//错误提示信息
});

大功告成!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值