获取 JavaScript 异步函数返回值的笔记

2022-08-24 12:39:56

wrong action

function asyncfunc() {
  let ret = 100;

  setTimeout(() => {
    return ret;
  }, 1000)
}

let ret = asyncfunc()
console.log(ret) // undefined

callback

function asyncfunc(callback) {
  let ret = 100;

  setTimeout(() => {
    callback(ret)
  }, 1000)
}

function callback(ret) {
  // 处理异步获取的数据
  console.log(ret)
}

asyncfunc(callback)

promise

function asyncfunc() {
  let ret = 100

  return new Promise(function(resolve) {
    setTimeout(() => {
      resolve(ret)
    }, 1000)
  })
}

asyncfunc().then(value => {
  // 处理异步获取的数据
  console.log(value)
})

generator

function asyncfunc() {
  let ret = 100

  setTimeout(() => {
    it.next(ret)
  }, 1000)
}

function *gen() {
  let ret = yield asyncfunc()

  // 处理异步获取的数据
  console.log(ret)
}

let it = gen()
it.next()

generator + promise

function asyncfunc() {
  let ret = 100

  return new Promise(resolve => {
    setTimeout(() => {
      resolve(ret)
    }, 1000)
  })
}

function *gen() {
  let ret = yield asyncfunc()

  // 处理异步获取的数据
  console.log(ret)
}

let it = gen()
it.next().value.then(value => {
  it.next(value)
})

promise 解决了回调地狱的痛点，但是还是有回调；generaror 使得异步可以像同步一样书写，但是无法自动执行，需要多次调用 it.next()；async/await 是 generator 的语法糖，使得 iterator 可以自动执行

暂时没发现 generator + promise 的正确使用姿势（只发现了 asyncfunc() 方法內可以不使用 it 变量，使得 asyncfunc() 方法更加干净，但是上面的例子引入了 promise 的回调，有点回到旧时代的感觉），待学习

2017/11/06: generator 和 promise 搭配使用，可能是为了能使错误捕获更加顺利

async/await

function asyncfunc() {
  let ret = 100

  return new Promise(resolve => {
    setTimeout(() => {
      resolve(ret)
    }, 1000)
  })
}

(async function() {
  let ret = await asyncfunc()

  // 处理异步获取的数据
  console.log(ret)
})()

码农公寓