小程序实战开发（一）Promise封装request

wx.request是我们实际开发中很常用的一个东西

但是我看到他第一个回忆起来的就是对异步的恐惧，还记得当年看得见抓不着的数据吗？还记得当年的回调地狱吗？

看的见抓不着

Page({
  data: {
    myData: ''
  },
  // loadMyData函数用于打印myData的值
  loadMyData () {
    console.log('获取到的数据为：' + this.data.myData)
  },
  // 生命周期函数onload用于监听页面加载
  onload: function () {
    wx.request({
      url: 'https://api',  // 某个api接口地址
      success: res => {
        console.log(res.data)
        this.setData({
          myData: res.data
        })
        console.log(this.data.myData)
      }
    })
    // 调用之前的函数
    this.loadMyData()
  }
})

我们在控制台会得到这样的输出

输出的数据为什么会为空呢？
很简单的问题，wx.request是个异步操作，js不会等待他先执行完在往下执行，而是先去执行了this.loadMyData()这样的话输出结果肯定为空了。
其实有经验的人都知道，遇到异步函数不要慌，一个回调解决它。也就是说对于一个异步函数，我们传一个回调函数就可以来接收结果了。

回调解决异步问题

onload: function () {
  wx.request({
    url: 'https://api',  // 某个api接口地址
    success: res => {
      console.log(res.data)
      this.setData({
        myData: res.data
      })
      console.log(this.data.myData)
      // 把使用数据的函数写在回调函数success中
      this.loadMyData()
    }
  })
}

这样就可以正确输出了。

异步是解决了，但是回调地狱呢？(这才是最可怕的)

asyncFn1(function(){
  //...
  asyncFn2(function(){
    //...
    asyncFn3(function(){
      //...
      asyncFn4(function(){
        //...
        asyncFn5(function(){
           //...
        });
      });
    });
  });
});

wx.request它在页面复杂，执行顺序要求多的情况下，弊端也是很明显的，不过好在小程序支持ES6，我们还有promise可以使用

使用Promise封装wx.request

Promise是将异步的执行逻辑和结果处理分离，使处理逻辑更加清晰。

/**
 * requestPromise用于将wx.request改写成Promise方式
 * @param：{string} myUrl 接口地址
 * @return: Promise实例对象
 */
const requestPromise = myUrl => {
  // 返回一个Promise实例对象
  return new Promise((resolve, reject) => {
    wx.request({
      url: myUrl,
      success: res => resolve(res)
    })
  })
}
// 我把这个函数放在了utils.js中，这样在需要时可以直接引入
module.exports = requestPromise

使用Promise封装的wx.request

// 引用模块
const utilApi = require('../../utils/util.js')
Page({
  ...
  // 生命周期函数onload用于监听页面加载
  onLoad: function () {
    utilApi.requestPromise("https://www.bilibili.com/index/ding.json")
    // 使用.then处理结果
    .then(res => {
      console.log(res.data)
      this.setData({
        myData: res.data
      })
      console.log(this.data.myData)
      this.loadMyData()
    })
  }
})

当有多个请求时，直接不断的去 .then(function) 就行,逻辑很清晰
这里只是写了一个最简单的Promise函数，还不完整。更完整的Promise化wx.request，等以后业务需要再完善吧。另外各种小程序开发框架也都有了现成的promise化API，拿来即用。

希望这篇文章对大家有所帮助，可以的话帮忙点亮下旁边的小手，让更多人看到 ，
如果上述代码有错误和不足，请评论或私信，我好及时改正。

参考文章：http://www.wxapp-union.com/article-4554-1.html