异步结果作为函数返回值

• 通常，一个函数如果要把异步结果（请求返回值、定时器结果等）作为这个函数的返回值，就需要回调函数。如果不用回调函数，在异步结束的时候直接return，那么调用这个函数的时候，函数的真正返回值会是undefined。例如函数a如下：

this.$models.a('xxx').then(res=>{
        if(res.status.retcode === 0){
            return res.data
}})

• 调用函数a()，let result = a()，得到的值是undefined，因为请求是异步的，在获取到请求结果之前已经return了。

• 传统方式就是给a传一个回调函数，在回调函数里处理其他业务逻辑，即

  • 调用：a(cb(....))
  • a的实现：

  this.$models.a('xxx', data).then(res=>{
      if(res.status.retcode === 0){
          if(cb) cb()
  }})
  

• 有了Promise之后，可以新建一个Promise函数，得到一个返回值，

  • a：

  a() {
  // 其实$models返回的就是一个Promise，也可以直接return this.$models...，但是为了举例子方便，不再修改。
      return new Promise(resolve => {
          this.$models.a('xxx').then(res=>{
              if(res.status.retcode === 0){
                  resolve(res.data)
              } else {
                  resolve([])
              }
          })
      })
  }
  

  • 调用：此时 a()是一个Promise对象，需要使用then()方法接收处理之后的值：

  a().then(data => {
      console.log(data) // 这个data就是resolve之后的数据
  })
  

• 要实现类似的功能，还可以选择generator或者async，省去generator不谈，记录一下async的实现方法。

  • a：

  a() {
      return new Promise(resolve => {
          this.$models.a('xxx').then(res=>{
              if(res.status.retcode === 0){
                  resolve(res.data)
              } else {
                  resolve([])
              }
          })
      })
  }
  

  • 调用：用一个async函数来接收a，然后调用这个函数即可

  async function b() {
      let data = await a();
      console.log(data)
      ....
  }
  b()