Promise 的 async 与 await

我会带着你远行 2022-08-29 00:28 173阅读 0赞

#### 一、async 与 await ####

1.  `async` 函数，如下所示：

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

1.  `await` 表达式，如下所示：

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

1.  注意点，如下所示：

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

#### 二、async 与 await 的使用 ####

1.  `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>

1.  `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>

1.  `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();

1.  `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>