美文网首页
【小程序】promise在小程序中的运用

【小程序】promise在小程序中的运用

作者: 空城皆是旧梦 | 来源:发表于2019-03-04 22:21 被阅读39次

    当开发者在开发时,可能会遇到这种情况:一个页面的加载会需要多种请求返回的数据构成,当页面一旦加载,显示加载条,只有当所有的请求都成功之后才会显示其页面,才会隐藏加载条。

    但多种请求无法预测哪个请求首先完成。

    如果使用请求中套用请求这种方法,用户的体验不是很好。

    可以采用 promise.all方法可以把多个promise实例合并为一个,等待所有的子promise全部执行完成之后,才会触发回调函数。

    使用方法:

    1. 将下载下来的promise文件复制到开发项目的目录下。
    2. 在页面的js文件中引用。(其中api是自定义的请求配置,不能直接使用哦)
    const api = require('../../utils/api.js') // api公共配置
    const promise = require('../../utils/promise.min.js')
    
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        gameList: [],
        lastList: []
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function () {
        const that = this;
        wx.showLoading({
          title: '加载中',
        })
        return new Promise(function (resolve, reject) {
          Promise.all([that.games(), that.lastest()]).then(function ([d1, d2]) {
            that.setData({
              gameList: d1,
              lastList: d2
            })
          }).then(function () {
            wx.hideLoading();
          })
        })
      },
      games: function () {
        return new Promise(function (resolve, reject) {
          api.get('game/list', '', function (obj) {
            resolve(obj) // success
          })
        })
      },
      lastest: function () {
        return new Promise(function (resolve, reject) {
          api.get('latest/list', '', function (obj) {
            resolve(obj) // success
          })
        })
      }
    })
    

    相关文章

      网友评论

          本文标题:【小程序】promise在小程序中的运用

          本文链接:https://www.haomeiwen.com/subject/tsowuqtx.html