一、前言 作者平时使用`mpvue`开发小程序，所以下面讲到的方法都是基于`mpvue`而言的，当然本质上原生小程序语法同样适用 大家都知道，小程序的接口都是采用回调的方式，这样如果代码逻辑复杂了，将会导致代码难以阅读。今天就通过`ES6`的`Promise`函数，来稍微改造一下小程序接口，让我们的代码实现链式调用，便于阅读。 二、核心代码 在utils目录下新建文件WXP.js（WX Promise）,代码内容如下： [JavaScript] 纯文本查看 复制代码 // 代码核心，利用到了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` [JavaScript] 纯文本查看 复制代码 // main.jsimport Vue from 'vue'import App from './App'import WXP from './utils/wxp'Vue.config.productionTip = falseApp.mpType = 'app'Vue.prototype.WXP = WXPconst app = new Vue(App)app.$mount() 这么做主要是全局配置之后，就不需要每个文件里面都导入`WXP.js`文件，便于使用。 四、使用 改造前的回调方式： [JavaScript] 纯文本查看 复制代码 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) }})改造后的链式调用方式 [JavaScript] 纯文本查看 复制代码 this.WXP.showLoading({title:'测试'}) .then(res=>{ return this.WXP.login() }) .then(res=>{ console.log(res.code) }) .catch(err=>console.error(err))可以看出来，当回调的方式层次不深的时候还是便于阅读的，但是异步操作多了，层次就会多，这样代码就会变得难以阅读。而改造后的链式调用方式，不管你层次有多少，都是一条链一样，一步一步的，思路清晰，易于阅读。不得不说，`Promise`大法好哈哈哈哈哈哈哈哈哈 参考连接： 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
