async / await

async / await 自己理解规范 :

async/await基于Promise封装的语法糖,我了解道德异步问题的最终解决方案.async用于声明函数为异步函数,await用于等待一个异步方法执行完成.

async作用/用法:

async用于声明function为一个异步函数,调用async声明的异步函数返回的是一个Promise对象,该函数return的数据将作为调用的该函数返回的Promise对象的.then()方法的res.如果该函数没有返回值则该函数返回的是一个undefined的Promise对象

async function test () {
    const res = await someThingFunc();
    return res; 
}
test();//返回的为一个Promise对象
test().then(res => {});  // res为test()的返回值

await作用/用法:

await存在于async声明的函数的内部,await等待的如果是一个Promise,纳闷await就会阻塞代码的执行,等待Promise执行完毕,在继续执行代码,如果等待的不是Promise,那就直接返回.

async function testOne() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve({test: 1000})
        }, 5000)
    })
}

async function testTwo() {
    return '直接返回数据'
}

async function next() {
    const res2 = await testTwo();
    const res1 = await testOne();
    const res2 = await testTwo();
    console.log(res1);
    console.log(res2);
}
next(); // 等待5s才会打印出结果,因为调用函数,res1这里会阻塞5s等待Promise执行完成.

错误处理: 如果await后面的异步报错,那么等同于async函数返回的Promise对象被reject

async function testOne() {
    await Promise.reject('报错');
}

testOne().then(res => {
    console.log(res, '不会打印');
}, error => {
    console.log(error, '打印出错');
})

为了防止await后面的Promise出错，可以在async函数内部用try-catch将异步函数包裹

async function testTwo() {
    try {
        await new Promise((resolve,reject)=>{
            throw new Error('这里抛错');
        })
    } catch (e) {
        console.log(e, 'testTwo的Promise异常');
    }
}

注意事项： 如果需要多次使用await，并且后面的Promise对象都是独立的不相互依赖的，那最好不要分开写，如果分开写就会依次调用Promise,使代码的效率降低。可以使用Promise.all()同时进行请求。

async function testFather () {
    let one = await getOneValue();
    let Two = await getTwoValue();
    // 如果getOneValue和getTwoValue是独立不相互依赖的，效率低
    // 高效写法一
    let [one, two] = await Promise.all([getOneValue(), getTwoValue]);
    // 高效写法二
    let one = getOneValue();
    let two = getTwoValue();
    let oneValue = await one;
    let twoValue = await two;
    // 没有直接'await 异步函数'所以不会阻塞下面代码呦，也就是说俩个异步操作直接进入任务队列
}

async/await 优点： 可以处理链式Promise

function test (time) {
    return new Promise(resolve => {
     setTimeOut( () => {
               resolve(1000);
            } ,time);
     })
}
// 优化之前
 function consoleString () {
    test(1000).then(res1 => {
        test(res1).then(res2 => {
            // 处理的操作
            console.log(res, '数据展示');
        })
    })
}
// async/await 对函数进行优化
async function consoleString () {
    let resultOne = await test(1000),
        resultTwo = await test(resultOne);
}