异步终结者 async await , 了解一下

7,139 阅读5分钟

前言

文章涉及的内容可能不全面,但量很多,需要慢慢看。我花了很长的时间整理,用心分享心得,希望对大家有所帮助。但是难免会有打字的错误或理解的错误点,希望发现的可以邮箱告诉我ghui_master@163.com,我会及时的进行修改,只希望对你有所帮助,谢谢。

吐槽&吹嘘

关于异步处理,ES5的回调使我们陷入地狱,ES6的Promise使我们脱离魔障,终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。 上车了

async-await 和 Promise的关系

混迹于各大技术社区的 鹅,经常看到这样的字眼,有了async-await、promise 还有必要学习吗、async await优于promise的几个特点,看到这样的信息后,鹅也蒙圈了。 现在才知道,async-await是promise和generator的语法糖。只是为了让我们书写代码时更加流畅,当然也增强了代码的可读性。简单来说:async-await 是建立在 promise机制之上的,并不能取代其地位。 懂否 ???

还是从基础走起

async function func() {
    let result = await Math.random();
    console.log(result);
}

func();
<!--输出-->
0.8177900460417995
Promise:{<resolved>: undefined}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: undefined

上面得栗子 就是 async-await的基本使用语法。有两个陌生的关键字async、await,同时函数执行结果似乎返回了一个promise对象。

async

async用来表示函数是异步的,定义的async函数返回值是一个promise对象,可以使用then方法添加回调函数。


async function func1() {
    return 123;
}

func1().then(val => {
    console.log(val); // 123
});
 <!--
    若 async 定义的函数有返回值,return 123;
    相当于Promise.resolve(123),没有声明式的 return则相当于执行了Promise.resolve();
-->

await

await 可以理解为是 async wait 的简写。await 必须出现在 async 函数内部,不能单独使用。 函数中只要使用await,则当前函数必须使用async修饰

function notAsyncFunc() {  
    await Math.random();
}
notAsyncFunc();
<!--
    Uncaught SyntaxError:  Unexpected identifier
    Uncaught SyntaxError: await仅在异步函数中有效
-->

await 后面可以跟任何的JS 表达式。虽然说 await 可以等很多类型的东西,但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决,如果等的是正常的表达式则立即执行。

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(' enough sleep~');
        }, second);
    })
}
function normalFunc() {
    console.log('normalFunc');
}
async function awaitDemo() {
    await normalFunc();
    console.log('something, ~~');
    let result = await sleep(2000);
    console.log(result);// 两秒之后会被打印出来
}
awaitDemo();

<!-- 输出 -->
VM899:9 normalFunc 
VM899:13 something, ~~

Promise:{<pending>}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: undefined

VM889:15  enough sleep~

希望借此小栗子 ,帮助大家理解上述。

还是来个真的实例吧

在真实开发中,你有三个请求需要发生,第三个请求是依赖于第二个请求的解构第二个请求依赖于第一个请求的结果。

若用 ES5实现会有3层的回调, 若用Promise 实现至少需要3个then。
一个是代码横向发展,另一个是纵向发展。 今天主角是 async-await 的实现哈~

//我们仍然使用 setTimeout 来模拟异步请求
function sleep(second, param) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(param);
        }, second);
    })
}

async function test() {
   let result1 = await sleep(2000, 'req01');
	console.log(` ${result1}`);
    let result2 = await sleep(1000, 'req02' + result1);
	console.log(`  ${result2}`);
    let result3 = await sleep(500, 'req03' + result2);
    console.log(` ${result3}`);
   
}

test();

<!-- 输出 
Promise {<pending>}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: undefined

VM913:14 
      req01
      req02req01
      req03req02req01


-->

reject 处理

上面的都是 resolved 的情况,那么 reject 的处理呢

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('want to sleep~');
        }, second);
    })
}

async function errorDemo() {
    let result = await sleep(1000);
    console.log(result);
}
errorDemo();// VM706:11 Uncaught (in promise) want to sleep~

// 为了处理Promise.reject 的情况我们应该将代码块用 try catch 包裹一下
async function errorDemoSuper() {
    try {
        let result = await sleep(1000);
        console.log(result);
    } catch (err) {
        console.log(err);
    }
}

errorDemoSuper();// want to sleep~
// 有了 try catch 之后我们就能够拿到 Promise.reject 回来的数据了。

前方高能(并行处理)请注意!!!

对于初学者来说一不小心就将 ajax 的并发请求发成了阻塞式同步的操作了,我就真真切切的在工作中写了这样的代码。await 若等待的是 promise 就会停止下来。真实业务是这样的,我有三个异步请求需要发送,相互没有关联,只是需要当请求都结束后将界面的 loading 清除掉即可。 刚学完 async await 开心啊,到处乱用~

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('request done! ' + Math.random());
        }, second);
    })
}

async function bugDemo() {
    await sleep(1000);
    await sleep(1000);
    await sleep(1000);
    console.log('clear the loading~');
}

bugDemo(); // 等待一会输出 clear the loading~

loading 确实是等待请求都结束完才清除的。但是你认真的观察下浏览器的 timeline 请求是一个结束后再发另一个的(若观察效果请发真实的 ajax 请求)

那么,正常的处理是怎样的呢?

async function correctDemo() {
    let p1 = sleep(1000);
    let p2 = sleep(1000);
    let p3 = sleep(1000);
    await Promise.all([p1, p2, p3]);
    console.log('clear the loading~');
}
correctDemo();// clear the loading~

Well, perfect. See, async await doesn't replace promise

await in for 循环

await必须在async函数的上下文中的,await仅在异步函数中有效。

// 正常 for 循环
async function forDemo() {
    let arr = [1, 2, 3, 4, 5];
    for (let i = 0; i < arr.length; i ++) {
        await arr[i];
    }
}
forDemo();//正常输出
// 因为想要炫技把 for循环写成下面这样 (然而吧)
async function forBugDemo() {
    let arr = [1, 2, 3, 4, 5];
    arr.forEach(item => {
        await item;
    });
}
forBugDemo();// Uncaught SyntaxError: Unexpected identifier
----------------------
async function forBugDemo() {
    let arr = [1, 2, 3, 4, 5];
    arr.forEach(async (item) => { 
        await item; 
    }); // 这样就不会报错了,但是await后面的异步不会等待执行,因为forEach底层是while循环
}
forBugDemo();


hahaha

ES7中新增的“语法糖”:async await

  • 函数中只要使用await,则当前函数必须使用async修饰
  • async是把修饰一个函数,控制其返回的结果是一个Promise实例
  • await可以理解为把一个异步操作修饰为同步的效果(但是它还是异步)

黑夜无论怎样悠长,白昼总会到来