async/await浅析

async的作用

async声明的函数表示函数是异步的，并且，被async声明的函数，会返回一个Promise对象，所以如果在函数中直接返回一个直接量，这个直接量会被Promise.resolve()封装成一个promise对象。
例如：

async function testAsync() {
    return "hello async";
}
const result = testAsync();
console.log(result);

// 这里会打印出一个Promise，此时如果我们不用await获取返回值，也可以使用.then的方式获取。但如果没有返回值，就会返回一个undefined

// 因为promise的特点是无等待，所以没有await时执行async，会立即执行并返回promise对象，并且不会阻塞其他执行。

await的作用

await是要等待async的返回结果，不论async函数是promise还是直接量，await都可以获取结果，例如：

function getSomething() {
    return "something";
}
async function testAsync() {
    return Promise.resolve("hello async");
}
async function test() {
    const v1 = await getSomething();
    const v2 = await testAsync();
    console.log(v1, v2); 
} 
test(); // something   hello async

await优势

单独的promise并不能体现出await的优势，在处理then链式调用的时候可以发现它的好处。
例如：

/**
 * 传入参数 n，表示这个函数执行的时间（毫秒）
 * 执行的结果是 n + 200，这个值将用于下一步骤
 */
function takeLongTime(n) {
    return new Promise(resolve => {
        setTimeout(() => resolve(n + 200), n);
    });
}
function step1(n) {
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}
function step2(n) {
    console.log(`step2 with ${n}`);
    return takeLongTime(n);
}
function step3(n) {
    console.log(`step3 with ${n}`);
    return takeLongTime(n);
}

// 使用promise处理
function doIt() {
    console.time("doIt");
    const time1 = 300;
    step1(time1)
        .then(time2 => step2(time2))
        .then(time3 => step3(time3))
        .then(result => {
            console.log(`result is ${result}`);
            console.timeEnd("doIt");
        });
}
doIt();

// 使用await
async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time2);
    const result = await step3(time3);
    console.log(`result is ${result}`);
    console.timeEnd("doIt");
}
doIt();
// 这种写法代码变得清晰很多，看起来也很像同步代码，简单易读。

如果我们每一个异步都要依赖于前面每一个异步返回的结果，这样使用await的优势就更明显了。例如：

function step1(n) {
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}
function step2(m, n) {
    console.log(`step2 with ${m} and ${n}`);
    return takeLongTime(m + n);
}
function step3(k, m, n) {
    console.log(`step3 with ${k}, ${m} and ${n}`);
    return takeLongTime(k + m + n);
}

// 使用promise，参数传递起来优点麻烦呢
function doIt() {
    console.time("doIt");
    const time1 = 300;
    step1(time1)
        .then(time2 => {
            return step2(time1, time2)
                .then(time3 => [time1, time2, time3]);
        })
        .then(times => {
            const [time1, time2, time3] = times;
            return step3(time1, time2, time3);
        })
        .then(result => {
            console.log(`result is ${result}`);
            console.timeEnd("doIt");
        });
}
doIt();

// 使用await
async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time1, time2);
    const result = await step3(time1, time2, time3);
    console.log(`result is ${result}`);
    console.timeEnd("doIt");
}

doIt();

以上就是对async与await的理解。参考链接