PHP前端开发

异步/等待

百变鹏仔 2个月前 (10-13) #JavaScript

异步/等待

与 promise 相比,async/await 是一种更新的异步代码编写方式。 async/await 的主要优点是提高了可读性并避免了承诺链。 promise 可能会变得很长、难以阅读,并且可能包含难以调试的深层嵌套回调。

例子

回想一下我们之前的获取。

fetch('https://jsonplaceholder.typicode.com/todos/1')  .then(response => response.json())  .then(data => console.log(data))  .catch(error => console.error('error:', error))  .finally(() => console.log('all done'));

使用 async/await,代码可以重构为如下所示:

async function fetchdata() {  try {    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');    const data = await response.json();    console.log(data);  } catch (error) {    console.error('error:', error);  } finally {    console.log('all done');  }}fetchdata();

虽然可能多了几行代码,但这个版本更容易阅读,因为它类似于普通的同步函数。此外,如果 .then() 语句内的函数更复杂,则可读性和可调试性将受到更大的影响。 async/await 示例更加清晰。

示例 2:从餐厅订餐

async/await 的结构

async/await 函数有两个基本部分:async 和await。 async 关键字加在函数声明前,await 用于异步任务开始时。

让我们以从餐厅点餐的例子来说明这一点:

// simulate the order process with async/awaitasync function foodorder() {  console.log("ordering food...");  await new promise(resolve => settimeout(resolve, 2000)); // wait 2 seconds for food to be prepared  return "your food is ready!";}// simulate the eating processfunction eatfood(order) {  console.log(order); // this logs "your food is ready!"  console.log("enjoying the meal!");}// simulate continuing the conversationfunction continueconversation() {  console.log("while waiting, you continue chatting with friends...");}async function orderfood() {  console.log("you've arrived at the restaurant.");  const order = await foodorder(); // place the order and wait for it to be ready  continueconversation(); // chat while waiting  eatfood(order); // eat the food once it arrives}orderfood();

输出将是

You've arrived at the restaurant.Ordering food...While waiting, you continue chatting with friends...Your food is ready!Enjoying the meal!