ES6 async/await关键字 (上)

async关键字

---

在ES6中，声明异步函数很简单，只需要在function前加上async关键字即可，如下：

 async function helloWorld() {
  // todo
  return 'hello world'
}

那怎么调用呢？async 函数也是函数，平时我们怎么使用函数就怎么使用它，直接加括号调用就可以了，为了表示它没有阻塞它后面代码的执行，我们在async 函数调用之后加一句console.log;

async function helloWorld() {
    return 'hello world'
}
helloWorld();
console.log('虽然在后面，但是我先执行');

image.png

async 函数 helloWorld调用了，但是没有任何输出，它不是应该返回 'hello world'吗？ 先不要着急， 看一看helloWorld()执行返回了什么？ 把上面的 helloWorld() 语句改为console.log(helloWorld())：

async function helloWorld() {
    return 'hello world'
}
console.log(helloWorld());
console.log('虽然在后面，但是我先执行');

image.png

可以看出，async 函数返回的是一个promise 对象，如果要获取到promise 返回值，我们应该用then 方法：

async function helloWorld() {
    return 'hello world'
}
helloWorld().then(result => {
    console.log(result);
})
console.log('虽然在后面，但是我先执行');

image.png

我们获取到了"hello world', 同时helloWorld的执行也没有阻塞后面代码的执行，和说的一致。
这时，控制台中的Promise有一个resolved，这是async 函数内部的实现原理。如果async 函数中有返回一个值 ,当调用该函数时，内部会调用Promise.resolve() 方法把它转化成一个promise 对象作为返回，但如果helloWorld函数内部抛出错误呢？ 那么就会调用Promise.reject() 返回一个promise 对象， 这时修改一下helloWorld函数:

async function helloWorld(bool) {
    if (bool) {
        return 'hello world'
    } else {
        throw 'error'
    }
}
console.log(helloWorld(true))  // 调用Promise.resolve() 返回promise 对象。
console.log(helloWorld(false)); // 调用Promise.reject() 返回promise 对象。

image.png

如果函数内部抛出错误， promise 对象有一个catch 方法进行捕获:

helloWorld(false).catch(err => {
    console.log(err)
})