用Promise实现小程序接口链式调用

一、前言

作者平时使用`mpvue`开发小程序,所以下面讲到的方法都是基于`mpvue`而言的,当然本质上原生小程序语法同样适用。

 

大家都知道,小程序的接口都是采用回调的方式,这样如果代码逻辑复杂了,将会导致代码难以阅读。今天就通过`ES6`的`Promise`函数,来稍微改造一下小程序接口,让我们的代码实现链式调用,便于阅读。

 

二、核心代码

在utils目录下新建文件WXP.js(WX Promise),代码内容如下:

// 代码核心,利用到了ES6的Promise函数
function p (func, obj) {
 return new Promise((resolve, reject) => {
 func({
 ...obj,
 success: resolve,
 fail: reject
 })
 })
}
 
// 此处导出你在开发中需要用到的小程序接口
export default {
 login: obj => p(wx.login, obj),
 showLoading: obj => p(wx.showLoading, obj),
}

代码原理很简单,主要就是在代码回调的地方,分别调用`resolve`和`reject`函数,分别对应着`success`和`fail`回调

 

三、在顶层`main.js`下全局配置`WXP.js`

// main.js
import Vue from 'vue'
import App from './App'
import WXP from './utils/wxp'
 
Vue.config.productionTip = false
App.mpType = 'app'
 
Vue.prototype.WXP = WXP
 
const app = new Vue(App)
app.$mount()

这么做主要是全局配置之后,就不需要每个文件里面都导入`WXP.js`文件,便于使用。

 

四、使用

改造前的回调方式:

wx.showLoading({
 title:'测试',
 success:function(){
 wx.login({
 success:function(res){
 console.log(res.code)
 },
 fail:function(err){console.error(err)}
 })
 },
 fail:function(err){
 console.error(err)
 }
})

改造后的链式调用方式

 

this.WXP.showLoading({title:'测试'})
.then(res=>{
return this.WXP.login()
})
.then(res=>{
console.log(res.code)
})
.catch(err=>console.error(err))

 

可以看出来,当回调的方式层次不深的时候还是便于阅读的,但是异步操作多了,层次就会多,这样代码就会变得难以阅读。而改造后的链式调用方式,不管你层次有多少,都是一条链一样,一步一步的,思路清晰,易于阅读。不得不说,`Promise`大法好哈哈哈哈哈哈哈哈哈

 

 

参考连接:
[小程序API](https://developers.weixin.qq.com/miniprogram/dev/api/)
[大白话讲解Promise](http://www.cnblogs.com/lvdabao/p/es6-promise-1.html)
[阮大佬的Promise](http://es6.ruanyifeng.com/#docs/promise)

 

作者:Rychou

原文:用Promise实现小程序接口链式调用-小程序社区/博主专区-微信小程序开发社区-微信小程序联盟

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值