2024年我彻底搞懂了async/await

缘由

在 JS 中，常见的异步处理方案有三种:

1、callback 回调的方式: 但是大量的 callback 会造成回调地狱的问题

2、Promise 处理方案: 用于解决回调地狱的问题

但是当我们通过 Promise 来解决回调地狱问题的时候，却发现，Promise 的处理方案其实并不优雅。

由此，就延伸出来了第三种方案:async、await

案例

实现A-D方法顺序打印

const isA = true;
const isB = true;
const isC = true;
const isD = true;

function A() {
     // 1.创建promise实例
     return new Promise((resolve, reject) => {
         // 2.当前处于【待定 pending】状态
         console.log('执行A接口的逻辑');
         setTimeout(() => {
             if (isA) {
                  // 3.进入【已兑换 fulfilled】状态
                  resolve('接口A执行完成');
              } else {
                  // 4.进入【已拒绝 rejected】状态
                  reject('接口A执行失败');
              }
       }, 1000)
     })
  }
  
  
  function B() {
        // 1.创建promise实例
        return new Promise((resolve, reject) => {
            // 2.当前处于【待定 pending】状态
            console.log('执行B接口的逻辑');
            setTimeout(() => {
                if (isB) {
                    // 3.进入【已兑换 fulfilled】状态
                    resolve('接口B执行完成');
                } else {
                    // 4.进入【已拒绝 rejected】状态
                    reject('接口B执行失败');
                }
            }, 1000)
        })
    }


 function C() {
        // 1.创建promise实例
        return new Promise((resolve, reject) => {
            // 2.当前处于【待定 pending】状态
            console.log('执行C接口的逻辑');
            setTimeout(() => {
                if (isC) {
                    // 3.进入【已兑换 fulfilled】状态
                    resolve('接口C执行完成');
                } else {
                    // 4.进入【已拒绝 rejected】状态
                    reject('接口C执行失败');
                }
            }, 1000)
        })
    }
    
    
     function D() {
        // 1.创建promise实例
        return new Promise((resolve, reject) => {
            // 2.当前处于【待定 pending】状态
            console.log('执行D接口的逻辑');
            setTimeout(() => {
                if (isD) {
                    // 3.进入【已兑换 fulfilled】状态
                    resolve('接口D执行完成');
                } else {
                    // 4.进入【已拒绝 rejected】状态
                    reject('接口D执行失败');
                }
            }, 1000)
        })
    }
    

1、回调地狱写法

A(function (res) {
       console.log(res);
       B(function (res) {
           console.log(res);
           C(function (res) {
               console.log(res);
               D(function (res) {
                   console.log(res);
               })
           })
        })
 });
    

2、Promise写法

  A().then(res => {
      console.log(res);
      return B();
  }).then(res => {
      console.log(res);
      return C();
  }).then(res => {
      console.log(res);
      return D();
  }).then(res => {
      console.log(res);
  })
    

3、async/await写法

async function fn() {

     //是同步的还是异步的？
     //使用await 可以让【异步的操作】拥有同步的写法
     
     const res = await A();
     console.log(res);
     const resB = await B();
     console.log(resB);
     const resC = await C();
     console.log(resC);
     const resD = await D();
     console.log(resD);
 }

 fn();
    

知识点讲解

1、async

async函数

2、await

await

async、await 的使用有两个关键点:

1、async 必须使用在函数上他会把一个函数标记为 异步函数

2、await 必须在异步函数 (async标记的函数) 中使用，它会等待一个 Promise 完成并获取它完成的结果。

写在最后

码字不易，你们的评论、转发和关注将是我写作的莫大动力，有问题欢迎交流，希望这篇文章对你有所帮助。