simplify the life

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

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)
})()

posted on 2017-10-30 21:59 韩子迟 阅读(...) 评论(...) 编辑 收藏

导航

统计信息

News