async/await 的一些小总结

首先async/await的用法很简单，用法如下

function logAfter3s(){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve(2);
            },3000)
        })
    }
    async function fn(){
        let val = await logAfter3s();
        console.log(val);
    }
   fn();
  //3秒之后打印出2

async函数返回一个Promise对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

 function logAfter3s(val){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve(val);
            },3000)
        })
     }
     async function fn(){
        console.log(1)
        return await logAfter3s(5);
     }
    fn().then((val)=>{
            console.log(val);
    })
//先打印1，然后3秒后打印5

通常情况下，await接收的也是一个返回Promise对象的函数，返回该对象的结果。如果不是Promise 对象，就直接返回对应的值。

比如：

async function fn(){
    return await 123；
    //等同于 return 123；
}
fn().then(val => console.log(val))  //123;

async/await的错误处理

function logAfter3s(val){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                reject('error');
            },1000)
        })
     }
     async function fn(){
        return await logAfter3s(5);
     }
    fn().then(val=>{
            console.log(val);
    }).catch(e=>{
        console.log(e);
    })

或者防止出错，可以将其放在try/catch里面

function logAfter3s(val){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                reject('error');
            },1000)
        })
     }

     async function fn(){
        try {
            await logAfter3s(5);
        }catch(e){
            console.log(e);
        }
        return await('hello world')
     }
    
    fn().then((val)=>{
        console.log(val);
    });
// error
// hello world
//会先打印出错误，然后接着执行下面的await('hello world')

如果有多个await请求，可以这样写

    function logAfter3s(val) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(val);
            }, 1000)
        })
    }

    async function fn() {
        for (let i = 0; i < 3; i++) {
            try {
                let num = await logAfter3s(i);
                console.log(num);
                if (num == 2) {
                    console.log('end');
                }
            } catch (e) {
                console.log(e);
            }
        }

    }

    fn();

或者，可以这样写：

    function logAfter3s(val) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(val);
            }, 1000)
        })
    }
    let aa = 0;
    async function fn() {
        for (let i = 0; i < 3; i++) {
            aa = await logAfter3s(i);
            console.log(aa);
        }
    }
    fn().then(() => {
        if (aa == 2) {
            console.log('end');
        }
    }).catch(e => {
        console.log(e)
    })

ps：如果多个await存在继发关系，或者说希望一个执行完之后再执行下一个，可以这么写：

let foo = await getFoo();
let bar = await getBar();

否则，如果两个独立的异步请求，不存在继发关系，希望同时触发的时候：

// 第一种：
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
// 第二种：
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

看个场景：

    function fn() {
        return new Promise(resolve => {
            console.log(1)
        })
    }
    async function f1() {
        await fn()
        console.log(2)
    }
    f1()
    console.log(3)；
    //打印结果是 1 3
    //2 不会打印，因为fn并没有被resolved，也就是await并没有等到结果，所以后面的2不会被打印

async/await 与promise有什么区别？

async/await实现的话，比promise的可读性好，代码简洁，更加语义化，把异步的代码同步法。

async的实现原理：

async实现原理就是把Generator 函数和自动执行器，包装在一个函数里面。把自动执行器改在语言层面提供，不暴露给用户。使其可读性更好，更加语义化。

ps: async/await实现sleep效果

function sleep(interval) {
  return new Promise(resolve => {
    setTimeout(resolve, interval);
  })
}

// 用法
async function one2FiveInAsync() {
  for(let i = 1; i <= 5; i++) {
    console.log(i);
    await sleep(1000);
  }
}

one2FiveInAsync();

参考：
https://es6.ruanyifeng.com/#docs/async
https://www.jianshu.com/p/b4fd76c61dc9