javaScript中的async和await的理解和案例

Async/Await详解

最新推荐文章于 2025-06-05 10:30:38 发布

原创最新推荐文章于 2025-06-05 10:30:38 发布 · 410 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

本文深入讲解ES6中引入并在ES7中完善的async/await语法。通过实例演示如何使用这两个关键字来简化异步代码的编写过程，并展示它们在处理Promise对象时的优势。

async / await

ES6 提出的语法, ES7 进行完善并且大规模使用的语法
两个关键字
阻塞式同步
要知道async就是将函数返回值使用Promise.resolve()包裹了下，和then中处理返回值一样
await不能直接执行setTimeout

async: 书写在函数的最前面, 把这个函数修改为一个异步函数
=> async function fn() {}
=> 为了表示函数内部的代码是一段异步代码
=> 为了让 await 关键字可以使用
await
=> 能且只能等待一个 promise 对象的完成
=> 只要你在 await 后面书写一个 promise 对象
=> 那么你本身应该在 then 里面接受的结果, 可以直接在 await 前面定义变量接受
=> 当这个 promise 没有完成的时候, 后面行的代码不会继续执行

标准样式案例:

 function showLight(color,time){
          return new Promise(function(resolve,reject){
              setTimeout(function(){
                  console.log(color);
                  resolve();//如果没有resolve  会一直挂起，执行resolve后可以没有then
                  // reject();//await reject会报错(没有catch执行或者then的第二个参数函数)
              },time)
          })
      }
      async function showLights(){
          // await showLight("红色",2000).catch(function(){
          //     console.log("aaa");
          // })
          await showLight("红色",2000);
          await showLight("黄色",2000);
          await showLight("绿色",2000);
          showLights();
      }
      showLights();

 async function fn() {
      console.log('我是 fn 函数')

      // 如果你想使用 await 关键字
      // 那么这个函数前面必须有 async 关键字
      // await console.log('你好')
      const res1 = JSON.parse(await pAjax({ url: './server/01.php', data: 'a=10&b=20' }))
      console.log('第一次请求结果 : ', res1)

      // 继续发送第二个请求
      const res2 = JSON.parse(await pAjax({ url: './server/02.php', data: `c=${res1.c}&d=${res1.d}` }))
      console.log('第二次请求结果 : ', res2)

      // 继续发送第三个请求
      const res3 = JSON.parse(await pAjax({ url: './server/03.php', data: `e=${res2.e}&f=${res2.f}` }))
      console.log('第三次请求结果 : ', res3)

      console.log('我是 fn 函数内部的后续代码')
    }

    fn()
    
	function pAjax(options) {
	  return new Promise(function (resolve, reject) {
	    ajax({
	      url: options.url,
	      data: options.data,
	      async: options.async,
	      method: options.method,
	      success (res) {
	        resolve(res)
	      }
	    })
	  })
	}

下面案例来自:简书Croc_wend 如不能理解,请跳转阅读

  async function async1() {
        console.log("async1 start");
        await async2();   //微任务
        console.log("async1 end");
      }
      async function async2() {
        console.log("async2");
      }
      console.log("script start");
      setTimeout(function () {  //宏任务 
        console.log("setTimeout");
      }, 0);
      async1();
      new Promise(function (resolve) {
        console.log("promise1");
        resolve();
      }).then(function () {
        console.log("promise2");  //微任务
      });
      console.log("script end");