首页  >  文章  >  web前端  >  异步/等待

异步/等待

Barbara Streisand
Barbara Streisand原创
2024-10-10 06:24:30814浏览

async / await

异步/等待

与 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/await
async 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 process
function eatFood(order) {
  console.log(order); // This logs "Your food is ready!"
  console.log("Enjoying the meal!");
}

// Simulate continuing the conversation
function 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!

以上是异步/等待的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn