微信小程序 前端 JavaScript 异步、同步

JavaScript代码在执行的时候是异步进行的。
例如：
.js：

Page({

  data: {
    
  },

  func1: function() {
    setTimeout(function(){console.log("func1")},2000)
  },

  func2: function() {
    setTimeout(function(){console.log("func2")},5000)
  },

  func3: function() {
    console.log(1)
    this.func1()
    console.log(2)
    this.func2()
    console.log(3)
  },

  onLoad: function (options) {
    this.func3()
  }
})

运行结果：

本以为结果为：

1
func1
2
func2
3

可实际结果为：

1
2
3
func1
func2

那如何得到

1
func1
2
func2
3

的结果呢？

Promise！

改进后的代码：
.js：

Page({

  data: {
    
  },

  func1: function() {
    var p = new Promise(function(resolve, reject){
      setTimeout(
        function(){
          console.log("func1")
          resolve('resolved')
        }
      ,2000)
    })
    return p 
  },

  func2: function() {
    var p = new Promise(function(resolve, reject){
      setTimeout(
        function(){
          console.log("func2")
          resolve('resolved')
        }
      ,5000)
    })
    return p 
  },

  func3: async function() {
    console.log(1)
    await this.func1()
    console.log(2)
    await this.func2()
    console.log(3)
  },

  onLoad: function (options) {
    this.func3()
  }
})

运行结果：

这样就得到

1
func1
2
func2
3

的结果了。