【Promise】async与await-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45980065/article/details/143635410

文章目录

1 MDN文档
2 async 函数
3 await 表达式
4 注意

1 MDN文档

async：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function
await：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await

2 async 函数

函数的返回值为 promise 对象。
promise 对象的结果由 async 函数执行的返回值决定。

3 await 表达式

await 右侧的表达式一般为 promise 对象，但也可以是其它的值。
如果表达式是 promise 对象，await 返回的是 promise 成功的值。
如果表达式是其它值，直接将此值作为 await 的返回值。

4 注意

await 必须写在 async 函数中，但 async 函数中可以没有 await。
如果 await 的 promise 失败了，就会抛出异常，需要通过 try…catch 捕获处理。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>11_async与await</title>
</head>

<body>
  <script>
    /*
    目标: 进一步掌握asyn/await的语法和使用
      mdn文档:
        https: //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function
        https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await
      1. async 函数
        函数的返回值为promise对象
        promise对象的结果由async函数执行的返回值决定
     
      2. await 表达式
        await右侧的表达式一般为promise对象, 但也可以是其它的值
        如果表达式是promise对象, await返回的是promise成功的值
        如果表达式是其它值, 直接将此值作为await的返回值
      
      3. 注意:
        await必须写在async函数中, 但async函数中可以没有await
        如果await的promise失败了, 就会抛出异常, 需要通过try...catch来捕获处理
    */

    //async函数的返回值是一个promise对象
    //async函数的promise的结果由函数执行的结果决定
    async function fn1() {
      //return 1; //成功的promise 1
      //throw 2; //失败的promise 2
      //return Promise.reject(3); //失败的promise 3
      //return Promise.resolve(3); //成功的promise 3
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(4); //4
        }, 1000);
      })
    }

    const result = fn1();
    //console.log(result);
    result.then(
      value => {
        console.log('onResolved()', value);
      },
      reason => {
        console.log('onRejected()', reason);
      }
    )

    function fn2() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          //resolve(5);
          reject(7);
        }, 1000);
      })
    }

    function fn4() {
      return 6;
    }

    async function fn3() {
      try {
        //const value = await fn1(); //1 
        const value = await fn2();
        console.log('value', value);
      } catch (error) {
        console.log('得到失败的结果', error); //7
      }
      //const value = await fn2(); //await右侧表达式为promise对象，得到的结果就是promise成功的value
      //const value = await fn4(); //await右侧表达式不是promise对象，得到的结果就是表达式的值（本身）
      //console.log('value', value); //5
    }

  </script>
</body>

</html>