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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,221评论 0 13
  • 今天手头工作完事了,然后升级了Xcode9,变化很大啊,先说大家一直关心的适配齐刘海吧. 这个东西好像出来之后 我...
    刘祺旭阅读 3,323评论 8 11
  • 缘分使然,得以在银川再见往日的同事。这还得从工作说起。 现在知道我的人,可能对我有两个不同层面的评价,第一个,毫无...
    方一尘阅读 200评论 0 0
  • 掖庭深深深几许,野草飘摇数盈虚。① 苍冷石级温不住,几回寒风诉不出。 哭尽凋零残月夜,天涯莽苍频入梦。 念得家母苍...
    逸之阅读 1,439评论 25 7