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

一、前言

作者平时使用mpvue开发<u style="text-decoration: none; border-bottom: 1px dashed gray;">小程序</u>，所以下面讲到的方法都是基于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](<u style="text-decoration: none; border-bottom: 1px dashed gray;">https://developers.weixin.qq.com/miniprogram/dev/api/</u>)
[大白话讲解Promise](<u style="text-decoration: none; border-bottom: 1px dashed gray;">http://www.cnblogs.com/lvdabao/p/es6-promise-1.html</u>)
[阮大佬的Promise](<u style="text-decoration: none; border-bottom: 1px dashed gray;">http://es6.ruanyifeng.com/#docs/promise</u>)

作者：Rychou

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