欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Promise封装request-mysunniess教学

程序员文章站 2022-06-23 15:22:22
小程序实战开发(一)promise封装request wx.request是我们实际开发中很常用的一个东西 但是我看到他第一个回忆起来的就是对异步的恐惧,还记得当年看得见抓不着的数据吗?还记得当年...

    小程序实战开发(一)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()
      }
    })
    

    我们在控制台会得到这样的输出
    Promise封装request-mysunniess教学
    输出的数据为什么会为空呢?
    很简单的问题,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()
        }
      })
    }
    

    这样就可以正确输出了。
    Promise封装request-mysunniess教学

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

    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,拿来即用。

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