1.es2017标准中引入了async，使得异步(async)操作更加方便

如有以下代码，定时器是异步执行的，代码并没有在阻塞等待定时器执行完再往下执行，是先打印了hello再打印的定时器：

  1.     <script>
  2.         function print(){
  3.             setTimeout(function(){
  4.                 console.log("定时器");
  5.             },1000);
  6.             console.log("hello");
  7.         }
  8.         print();
  9.     </script>

如果我们想实现按顺序执行的话可以用Promise、async和awit来实现同步(sync)处理，如下：

  1.     <script>
  2.         function timeout(ms) {
  3.             return new Promise(function (resolve, reject) {
  4.                 setTimeout(function () {
  5.                     console.log('定时器');
  6.                     resolve();
  7.                 }, ms);
  8.             });
  9.         }
  11.         async function asyncPrint(ms) {
  12.             await timeout(ms);
  13.             console.log('hello');
  14.         }
  16.         asyncPrint(100);
  17.     </script>

2.接口同步(sync)顺序执行

我们经常会遇到接口请求是要按顺序执行的情况，比如接口2的参数需要从接口1中拿到之后传进去的，像这种情况可以用Promise、async和awit来实现同步(sync)处理，如下：
项目用到了jquery,可以到官网下载：https://jquery.com/download/

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Document</title>
  4.     <script src="./jquery-3.6.0.min.js"></script>
  5. </head>
  7. <body>
  8.     <script>
  9.         function ajax(url) {
  10.             return new Promise(function (resolve, reject) {
  11.                 $.getJSON(url, function (result) {
  12.                     resolve(result)
  13.                 }, function (error) {
  14.                     reject(error)
  15.                 })
  16.             });
  17.         }
  18.         async function getInfo() {
  19.             // var id_data;
  20.             // // 可以用.then方法来处理得到data
  21.             // await ajax("http://iwenwiki.com/api/generator/list.php").then(
  22.             //     (data) => {
  23.             //         console.log(data);
  24.             //         id_data = data;
  25.             //     },
  26.             //     (error) =>{
  27.             //         console.log(error);
  28.             //     }
  29.             // )
  30.             // console.log(id_data);
  32.             // 也可以直接接收Promise对象里最终执行的函数返回值。
  33.             var id = await ajax("http://iwenwiki.com/api/generator/list.php")
  34.             console.log(id);
  35.             var info = await ajax("http://iwenwiki.com/api/generator/id.php?id=" + id[0])
  36.             console.log(info);
  37.             var result = await ajax("http://iwenwiki.com/api/generator/name.php?name=" + info.name)
  38.             console.log(result);
  39.         }
  40.         getInfo();
  41.     </script>
  42. </body>

image.png