如何使用 promise 和async、await 结合处理异步中的同步请求

如何使用 promise 和async、await 结合处理异步中的同步请求"/>

如何使用 promise 和async、await 结合处理异步中的同步请求

文章目录

• • 需求
  • 分析

需求

需求：让代码执行完循环A再进入代码B进行执行

分析

• 概念：

  • 当我们谈论同步（Synchronous）和异步（Asynchronous）时，可以将其简单地理解为不同的任务处理方式。

  • 同步操作是指程序按照顺序一步一步地执行，每个操作都要等待上一个操作完成后才能进行下一个操作。就像你在读文章时，必须先读完前面的章节才能继续往下读，不能跳过中间的内容。在同步操作中，每个操作都会阻塞程序的执行，直到它完成为止。

  • 异步操作则不同，它允许程序在执行某个操作时继续执行其他操作，而不需要等待该操作完成。这就好比你在看电视时，可以边看边吃零食或者做其他事情。在异步操作中，当某个操作被触发后，程序会立即注册这个操作，并继续执行后面的代码，而不会阻塞程序的执行。

  • 常见的例子可以是发送网络请求。当你使用同步方式发送网络请求时，程序会停下来，直到请求完成并获取到响应后才能继续执行后面的代码。而使用异步方式发送网络请求时，程序会立即发起请求，并不会等待请求的返回结果，可以继续执行后续的代码。当请求完成后，程序会通过回调函数或者事件触发来处理获取到的响应。

  • 总结起来，同步操作是按照顺序逐个执行，会阻塞程序的执行，需要等待上一个操作完成再进行下一个操作。而异步操作则是允许程序在执行某个操作时继续执行其他操作，不需要等待当前操作完成。异步操作常用于需要花费较长时间的任务，以提高程序的性能和响应能力。

  • 参考博主文章：处理异步请求的 async/await 和 promise
    使用 JavaScript 中的异步编程方式来实现。以下是一种简单的做法：

• 将循环 A 的代码封装成一个返回 Promise 的函数，例如：

function loopA() {return new Promise(resolve => {for (let i = 0; i < 10; i++) {console.log(`loopA ${i}`);}resolve(); // 在循环结束后调用 resolve()，表示 Promise 已完成});
}

• 在需要等待循环 A 执行完成后再进入代码 B 的地方，使用 await 关键字来等待 Promise 完成，例如：

async function run() {await loopA();console.log('enter code B');// 在这里编写进入代码 B 的语句
}
run();

• 在上述代码中，我们使用 async/await 语法，将 run 函数声明为异步函数。在 run 函数中，我们首先使用 await 关键字来等待循环 A 的 Promise 完成，等待 Promise 完成后，代码才会继续执行下一行。因此，在这里代码会等待循环 A 执行完成后，才会输出“enter code B”这一行的日志，进入代码 B 进行执行。