async 和 await的盲区

2017-07-14

先看一段代码，该代码自己天真以为a就是promise后的结果，其实不是这样子的

var asy = async function() {
  let a = await new Promise(function(resolve, reject){
    setTimeout(function(){
      resolve('here')
    }, 1000)
  })
  console.log(a + 'is')
  // var b = a + 'b'
  // return b
  return a
}
console.log(asy())

打印的内容为：这里的直接返回a其实就是一个promise,不是直接.then后的结果，但是在async函数里操作该promise的时候就是与.then的结果操作；直接返回a或者a + 'b'等都是返回的promise

1 2	Promise { <pending> } hereis

错误处理的注意点

一般的promise的错误处理方式都是通过.catch()的方式去捕捉错误，如下所示：

const makeRequest = () => {
  try {
    getJSON()
      .then(result => {
        // this parse may fail
        const data = JSON.parse(result)
        console.log(data)
      })
      .catch((err) => {
        console.log(err)
      })
  } catch (err) {
    console.log(err)
  }
}

通过async/await改写可以简化代码：

const makeRequest = async() => {
  try {
    let data = JSON.parse(await getJSON())
    console.log(data)
  } catch {
    console.log(err)
  }
}

还有一个很值得注意的地方：

async function rejectionWithReturnAwait () {
  try {
    return await Promise.reject(new Error())
  } catch (e) {
    return 'Saved!'
  }
}
async function rejectionWithReturn () {
  try {
    return Promise.reject(new Error())
  } catch (e) {
    return 'Saved!'
  }
}

第一个async函数,等待一个rejected状态的promise，并且被捕捉到，成功返回saved的状态的一个新的promise（await 会重新返回一个promise）；

第二个直接返回一个rejected的Promise，直接返回就是一个未被捕捉异常的promise

rejectionWithReturnAwait()
Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "Saved!"}
rejectionWithReturn()
Promise {[[PromiseStatus]]: "rejected", [[PromiseValue]]: Error
    at rejectionWithReturn (<anonymous>:11:27)
    at <anonymous>:1:1}

在下面这种抛出错误的情况下，要在外层以throwError().catch()的方式去捕捉错误；不能以try{}catch(err)的方式去捕捉异常。

async function throwError() {
  return new Error('happens with a error!')
}

注意点：await 一定要在async函数里才是语义正确的，不能在一些callback里；比如：

async function fetchContents(urls) {
  return urls.map(url => {
    // 这里是语法错误的
    const content = await httpGet(url);
    return content;
  })
}