美文网首页微信小程序开发专题
小程序填坑之旅-处理js异步执行问题

小程序填坑之旅-处理js异步执行问题

作者: hi_强子 | 来源:发表于2018-07-23 19:16 被阅读571次

    js作为脚本语言,虽然说也是顺序执行,但是会出现上一个语句还没有执行完,就执行下一个语句的情况,如果两个执行方法存在强关联性,即第二个方法的执行必须依赖第一个方法执行完,否则会出错 比如:

    Page({
      data: {
      data: {}
      },
      onload: function() {
        this.updateData();
        this.updateState();
      },
      updateData: function() {
        var that = this
        wx.request({
        url: XXXXX, //你的请求地址
        data: {},
        success: function(res) {
        that.setData({
          data: this.data.data
          }
        }
      })
      },
      updateState: function() {
        var data = this.data.data
        //进行数据状态判断
        },
    })
    

    这样运行的时候,还没有等到updateData更新到数据,已经在执行updateState了,这样得到的结果往往是不正确的,于是找方法发现了ES6 的promise
    promise的用法为:

    const promist = new Promise(function(resolve,reject){
        if(/*异步操作成功*/){
            resolve(value);
        }else{
            reject(error);
        }
    })
    

    于是改造原来代码

    Page({
      data: {
      data: {}
      },
      onload: function() {
        var that =this
        new Promise(function(resolve,reject){
            that.updateData(resolve);
        }).then(function(){
            that.updateState();
        })
      },
      updateData: function(resolve) {
        var that = this
        wx.request({
        url: XXXXX, //你的请求地址
        data: {},
        success: function(res) {
        that.setData({
          data: this.data.data
          if(resolve!=null){
            resolve('ok')
            }
          }
        }
      })
      },
      updateState: function() {
        var data = this.data.data
        //进行数据状态判断
        },
    })
    

    这样就能保证updateData执行完了之后才执行updateState

    相关文章

      网友评论

        本文标题:小程序填坑之旅-处理js异步执行问题

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