一、前言 作者平时使用`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`大法好哈哈哈哈哈哈哈哈哈 作者：Rychou