ES7新特性 asyn与await

本是古典何须时尚 2022-04-24 03:42 165阅读 0赞

## intro ##

`async`是ES7中新增的关键字，与`Promise`, `Generator`同为JS异步编程相关的特性。

`async` 用于修饰函数。  
`await` async函数中可能会有`await表达式`。

`for await...of`循环(ES5特性)

## async ##

`async`用于修饰函数。  
`async function funcName(?argsList) {statements}`  
`async函数`的返回值为`Promise`对象，可以用`then()添加回调函数`。

async function foo() {
      return "test string";
    }
    
    console.log(foo()); // Promise {<resolved>: "test string"}
    
    // Promise,prototype.then(resolve, reject);
    foo().then(function(value) {
      console.log(value); // test string
      // Promise {<resolved>: undefined}  // 无返回值为undefined。
    });

## await ##

*  `await`用于等待一个`Promise`对象，他只能在`async function`内部使用。
 *  语法  
    `[ret_value] = await expression;`

`expression`: 为一个`Promise`对象或任何要等待的值(字符串，数值，布尔值，函数等)。  
`ret_value`: 返回`Promise`对象的处理结果|等待的值本身。

*  expression类型：
    
     *  `Promise`对象：`await表达式`暂停执行，等待`Promise`对象resolve，然后恢复`async function`的执行并返回解析值。
     *  非`Promise`对象：直接返回对应的值。

`async函数`执行时，如果遇到`await表达式`，暂停执行，等触发的异步操作(`await表达式`)完成后，恢复`async函数`的执行并返回解析值。

## code ##

*  `awaitexpression`的表达式是一个`Promise`对象。
    
        function showMsg(msg, timeout) {
          return new Promise(function(resolve, reject) {
            setTimeout(function() {
              console.log(msg);
              resolve();
            }, timeout);
          });
        }
        
        async function foo() {
          await showMsg("hello", 2000); // await表达式
          console.log("world");
        }
        
        foo();
        // hello
        // world
    
    如果以上代码去掉`await`。  
    输出：
    
        world
        hello
 *  `await expression`的表达式不是`Promise`对象。
    
        function foo(msg, timeout) {
          setTimeout(function() {
            console.log(msg);
          }, timeout);
        }
        
        async function bar() {
          await foo("hello", 2000);   // 有无await都一样
          console.log("world");
        }
        
        bar();
    
    输出(有无`await`都一样)：
    
        world
        hello

## `for await...of` ##

*  [官网][Link 1] intro

> The for await…of statement creates a loop iterating over async iterable objects as well as on sync iterables,  
> including: built-in String, Array, Array-like objects (e.g., arguments or NodeList),  
> TypedArray, Map, Set, and user-defined async/sync iterables.  
> It invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object.
> 
> for await…of语句可以在可迭代对象(包括异步或同步)上创建一个循环。  
> 这些对象包括：内置类型String, Array, 类数组对象(比如arguments, NodeList等)。  
> 还有TypedArray, Map, Set以及用户定义的同步|异步可迭代对象。  
> 它调用一个自定义迭代钩子，其中包含要为对象的每个不同属性的值执行的语句。

*  语法

for await (variable of iterable) {
      statements
    }

*  code

for await (let e of [123, "hello", false]) {
      console.log(e);
    }

// 异步的generator方法
    async function* foo() {
      for (let i = 0; i < 3; i++) {
        yield i;
      }
    }
    for await (let e of foo()) {
      console.log(e);
    }

[Link 1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of