Promise 的 async 与 await

最新推荐文章于 2024-11-11 18:32:00 发布

城南花开ze

最新推荐文章于 2024-11-11 18:32:00 发布

阅读量509

点赞数

文章标签： js promise async await

本文链接：https://blog.csdn.net/weixin_42614080/article/details/119516736

版权

本文详细解读了async函数的工作原理，await表达式的使用场景，以及它们在实际开发中的应用，如文件读取、AJAX请求和数据流处理。通过实例演示了如何结合async和await简化异步操作和错误处理。

摘要由CSDN通过智能技术生成

一、async 与 await

async 函数，如下所示：

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

await 表达式，如下所示：

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

注意点，如下所示：

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

二、async 与 await 的使用

async 函数，代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>async 函数</title>
</head>
<body>
  <script>
    // then
    async function main () {
      // 如果返回值是一个非Promise类型的数据
      // return '123';
      // 如果返回的是一个Promise对象
      // return new Promise((resolve, reject) => {
      //   // resolve('ok');
      //   reject('error');
      // });
      //  抛出异常
      throw 'error';
    }

    let result = main();
    
    console.log(result);
    
  </script>
</body>
</html>

await 函数，代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>await 函数</title>
</head>
<body>
  <script>
    async function main () {
      let p = new Promise((resolve, reject) => {
        // resolve('ok');
        reject('error');
      });
      // 右侧为promise的情况
      // let res = await p;
      // 右侧为其他类型的数据
      // let res2 = await 20;
      // 右侧为其他类型的数据
      try {
        let res3 = await p;
      }catch(e) {
        console.log(e);
      }
    }

    main();
  </script>
</body>
</html>

async 与 await 的结合，代码如下所示：

/**
 * resource  1.html  2.html 3.html 文件内容
*/

const fs = require('fs');
const util = require('util');
const mineReadFile = util.promisify(fs.readFile);

//回调函数的方式
// fs.readFile('./resource/1.html', (err, data1) => {
//     if(err) throw err;
//     fs.readFile('./resource/2.html', (err, data2) => {
//         if(err) throw err;
//         fs.readFile('./resource/3.html', (err, data3) => {
//             if(err) throw err;
//             console.log(data1 + data2 + data3);
//         });
//     });
// });


// async 与 await 
async function main () {
  try {
    // 读取第一个文件的内容
    let data1 = await mineReadFile('./resource/1.html');
    let data2 = await mineReadFile('./resource/2.html');
    let data3 = await mineReadFile('./resource/3.html');
    console.log(data1 + data2 + data3);
  } catch (e) {
    console.log(e.code);
  }
}


main();

async 与 await 结合发送 ajax，代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>async与await结合发送ajax</title>
</head>
<body>
  <button id="btn">点击获取段子</button>
  <script>
    // axios
    function sendAJAX (url) {
      return new Promise((resolve, rejecy) => {
        const xhr = new XMLHttpRequest();
        xhr.responseType = 'json';
        xhr.open('GET', url);
        xhr.send();
        // 处理结果
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            // 判断成功
            if (xhr.status >= 200 && xhr.status < 300) {
              // 成功的结果
              resolve(xhr.response);
            } else {
              reject(xhr.status);
            }
          }
        }
      });
    }

    let btn = document.querySelectorAll('#btn');
    
    btn.addEventListener('click', async function () {
      // 获取段子信息
      let duanzi = await sendAJAX('https://api.apiopen.top/getJoke');
      console.log(duanzi);
    });
  </script>
</body>
</html>