Promise封装request-mysunniess教学

小程序实战开发（一）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，拿来即用。

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