初识Async/await

Async/await

一、 Why？

$\color{red}{Async函数}$ 是新的语法功能，用阮一峰老师的话来形容：“新到都不属于ES6，而是属于ES7”，现在虽然还在提案阶段，但是转码器Babel和regenerator都已经支持，转码后就可使用，之前在项目中了解过，但是没有深入的学习过，经过这几天面试发现大家（面试官）已经用的很熟练了，为了好好学习一下（找到合适的工作鸭）所以打算认识并简单的和这位“新盆友”沟通一下子，学习并阅读了几篇前辈的文章，自己也小小的总结一下。

二、 Who are you? (Async/await)

$\color{red}{Async/await}$ 会替代 $\color{green}{promise}$ 吗？在我之前还不了解Async/await的时候我还有些疑惑，真的会被替代吗？答案是否定的， $\color{red}{Async/await}$ 是依赖于 $\color{green}{promise}$ 的，并且是 $\color{green}{promise}$ 和 $\color{pink}{generator}$ 的语法糖。 $\color{red}{Async/await}$ 使我们书写的代码更流畅，并且也增强了代码的可读性。

三、实例

Async/await基本语法

async function commonFun () {
  let  result = await new Date();
  console.log(result);
}
commonFun();
// Thu Apr 25 2019 00:06:13 GMT+0800 (中国标准时间)
// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}

上面是 $\color{red}{Async/await}$ 的基本用法，看到 $\color{red}{async}$ 和 $\color{red}{await}$ 这陌生的面孔（特别是面试的时候）瞬间有点慌，观察发现函数的执行结果只返回了 $\color{orange}{一个promise}$ 对象，一个有趣的发现，下面我们先来了解一下 $\color{red}{Async}$ 。

Async

$\color{red}{Async}$ 用来表示函数是异步的，定义的函数会返回一个promise对象，可以使用then方法添加回调函数。假设代码中如果有 $\color{orange}{return<No promise>}$ 语句时，会有什么变化吗？下面我们来看两个实例

非Promise

async function noPromise () {
    return 'hello';
}
noPromise ().then(alert);
// hello

2.Promise

async function promiseFun () {
    return  Promise.resolve('hello')
}
promiseFun().then(alert);
// hello

从上面两个实例我们看到 $\color{red}{Async函数}$ 代码中如果有 $\color{orange}{return<No promise>}$ 语句时，js会自动把返回的这个value值包装成promise的resolved的值。

Await

$\color{red}{Await}$ 可以理解为是 async wait 的简写。await 必须出现在 async 函数内部，不能单独使用。

举个栗子：

 function outFun () {
    await new Date();
}
outFun();
// //Uncaught SyntaxError: Unexpected identifier

$\color{red}{await}$ 后面可以跟任何类型的js表达式，虽然说可以等待任何类型的东西，但是它最主要的意图是用来等待 Promise 对象的状态被 resolved，如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决,如果等的是正常的表达式则立即执行（引用前辈的总结）。

下面我们来看个小的栗子：

function chestnutFun (second) {
    return new Promise( (resolve,reject) => {
      setTimeout( () => {
          resolve('hello world')
      },second)
    })
}
function normalFun () {
    console.log("hello normalfunction")
 }
async function awaitFun () {
    await normalFun();
    console.log('do something');
    let result = await chestnutFun (3000);
    console.log(result);
}
awaitFun();
// hello normalfunction 第一名
// do something 第二名
// hello world  第三名 三秒之后被打印出来

用一首歌来形容await和async的话，你会想到什么?偷偷告诉你们我想到的是（终于等到你 = =!)。

暂结束语：今天就先总结到这儿吧，哈哈，明天回来再接着总结，啦啦啦，啃下这块硬骨头。

最后编辑于：2020.03.23 13:31:05