用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

1

主题

1

帖子

18

积分

新手上路

Rank: 1

积分
18
2018-10-7 14:21:17 Rychou 新手上路 楼主 23620
本帖最后由 Rychou 于 2018-10-7 14:24 编辑

一、前言

作者平时使用`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.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`文件,便于使用。

四、使用

改造前的回调方式:
[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`大法好哈哈哈哈哈哈哈哈哈



又看了一次
Promise的缺陷挺多的,推荐使用RxWX来处理异步
发新帖
    您需要登录后才可以回帖 登录 | 立即注册