Javascript中async与await的用法

async函数，也就是我们常说的async/await，是在ES2017(ES8)引入的新特性，主要目的是为了简化使用基于Promise的API时所需的语法。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用Promise。

async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。需要注意的是await关键字只在async函数内有效，如果在async函数体之外使用它，会抛出语法错误。

async函数返回一个 Promise对象，可以使用then方法添加回调函数。只要使用async，不管函数内部返回的是不是Promise对象，都会被包装成Promise对象。当在函数返回Promise对象，返回的也是Promise对象

async function testAsync() {
    return "hello async";
}

var result = testAsync();
console.log('1',result);

testAsync().then(function (data) {
    console.log('2',data)
})

async function testAsyncPromise() {
    return new Promise(function(resolve, reject) {
        if (true) {
            resolve('resolve return')
        } else {
            reject('reject return')
        }
    })
}
console.log('3',testAsyncPromise());

await关键字可以跟在任意变量或者表达式之前，但通常await后面会跟一个异步过程。await使用时，会阻塞后续代码执行。

function testAsync() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            if (true) {
                console.log('请求中...')
                resolve('resolve return')
            } else {
                reject('reject return')
            }
        }, 2000)
    })
}
var result = await testAsync();
var result1 = await "testAsync后执行";
console.log(result);
console.log(result1);

上面我们知道了await会阻塞后续代码运行，那怎么解决这个问题呢？就需要用到async，使用async后，函数执行时，一旦遇到await就会先返回一个Promise对象，等到await后的操作完成后，再接着执行async函数体内的语句。

function testAsync() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            if (true) {
                console.log('请求中...')
                resolve('resolve return')
            } else {
                reject('reject return')
            }
        }, 2000)
    })
}

function testAsync2() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            if (true) {
                console.log('请求中2...')
                resolve('resolve return2')
            } else {
                reject('reject return2')
            }
        }, 2000)
    })
}

async function test() {
    console.log('test开始...');
    var value1 = await testAsync();
    console.log(value1);
    var value2 = await testAsync2();
    console.log(value2);
    var value3 = await 'test结束...';
    console.log(value3);
}

console.log(test());

我们先梳理一下函数的执行过程，

1、先执行函数1

2、进入test函数并输出开始

3、在test函数中遇到await，立即返回Promise对象

4、执行函数2

5、执行test函数中的testAsync方法

6、等到test函数中的testAsync方法执行完后，继续执行testAsync2方法

7、test函数结束

​ 可以看出，async函数在遇到await后会立即返回Promise对象，继续执行async函数外部后续逻辑，async函数内部会被await阻塞并按顺序执行代码逻辑。

await后面的函数是有可能出现异常的，所以最好把await命令放在try...catch代码块中。如果await后是Promise对象，也可以使用.catch进行捕获。

// 第一种写法
async function myFunction() {
 try {
   await something();
 } catch (err) {
   console.log(err);
 }
}

// 第二种写法
async function myFunction() {
 await somethingPromise()
 .catch(function (err) {
   console.log(err);
 });
}

{/card-list-item}