0

0

异步/等待

心靈之曲

心靈之曲

发布时间:2024-10-10 08:02:50

|

769人浏览过

|

来源于dev.to

转载

异步/等待

异步/等待

与 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 示例更加清晰。

html5 SVG螺旋式扩散网页加载等待动画特效
html5 SVG螺旋式扩散网页加载等待动画特效

一款html5 SVG螺旋式扩散网页加载等待动画特效

下载

示例 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!

相关标签:

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

相关专题

更多
promise的用法
promise的用法

“promise” 是一种用于处理异步操作的编程概念,它可以用来表示一个异步操作的最终结果。Promise 对象有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。Promise的用法主要包括构造函数、实例方法(then、catch、finally)和状态转换。

303

2023.10.12

html文本框类型介绍
html文本框类型介绍

html文本框类型有单行文本框、密码文本框、数字文本框、日期文本框、时间文本框、文件上传文本框、多行文本框等等。详细介绍:1、单行文本框是最常见的文本框类型,用于接受单行文本输入,用户可以在文本框中输入任意文本,例如用户名、密码、电子邮件地址等;2、密码文本框用于接受密码输入,用户在输入密码时,文本框中的内容会被隐藏,以保护用户的隐私;3、数字文本框等等。

401

2023.10.12

c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

17

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

22

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

91

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

124

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

14

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

65

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

59

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号