百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

我们一起深入理解一下Javascript中的async/await与promise

liuian 2025-03-25 15:21 10 浏览

async/await 和 Promise 都是 JavaScript 中的异步编程工具。它们的主要区别在于语法和可读性。

Promise 是一种对象，用于表示一个异步操作的最终完成（成功或失败），并提供了一组链式方法（then、catch、finally）来处理这个异步操作的结果。

例如：

fetch('https://some-api.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log(error);
  });

async/await 是语法糖，它可以让我们使用同步的语法来编写异步代码。它依赖于 Promise ，因此在使用 async/await 时，需要先将异步操作封装成 Promise。

例如：

async function getData() {
  const response = await fetch('https://some-api.com/data');
  const data = await response.json();
  console.log(data);
}

Promise

Promise 是一种对象，用于表示一个异步操作的最终完成（成功或失败），并提供了一组链式方法（then、catch、finally）来处理这个异步操作的结果。

例如：

fetch('https://some-api.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log(error);
  });

Promise通常包含以下方法：

  • Promise.all(iterable) 方法用于将多个Promise实例包装成一个新的Promise实例。当所有的Promise都成功时，新的Promise实例才会成功，否则它就会失败。 例如：
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]
  • Promise.any(iterable) 方法用于将多个Promise实例包装成一个新的Promise实例。只要有一个Promise成功，新的Promise实例就会成功，否则它就会失败。 例如：
const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'first');
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, 'second');
});
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'third');
});

Promise.any([promise1, promise2, promise3]).then((value) => {
  console.log(value);
});
// expected output: "first"
  • Promise.race(iterable) 方法用于将多个Promise实例包装成一个新的Promise实例。当其中任意一个Promise成功或失败时，新的Promise实例就会成功或失败。 例如:
const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'first');
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(reject, 2000, 'second');
});
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'third');
});

Promise.race([promise1, promise2, promise3]).then((value) => {
  console.log(value);
}, (reason) => {
  console.log(reason);
});
  • Promise.allSettled(iterable) 方法用于将多个Promise实例包装成一个新的Promise实例。该Promise在所有给定的Promise都完成后才会完成。这可能是成功或失败。 例如：
const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'first');
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(reject, 2000, 'second');
});
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'third');
});

Promise.allSettled([promise1, promise2, promise3]).then(values => {
  console.log(values);
});
// expected output: [{ status: "fulfilled", value: "first" }, { status: "rejected", reason: "second" }, { status: "fulfilled", value: "third" }]

async/await

async/await 是语法糖，它可以让我们使用同步的语法来编写异步代码。它依赖于 Promise ，因此在使用 async/await 时，需要先将异步操作封装成 Promise。

例如：

async function getData() {
  const response = await fetch('https://some-api.com/data');
  const data = await response.json();
  console.log(data);
}

async/await 是ES7 引入的对 JavaScript 异步编程的一种改进，它提供了使用同步样式代码异步访问资源的选项，而不会阻塞主线程。

  • 使用 async/await 的优点

最重要的优点之一是它具有同步编程风格。让我们来看一个例子：

// async/await
const getArticlesByAuthorWithAwait = async (authorId) => {
  const articles = await articleModel.fetchAll(); 
  return articles.filter((b) => b.authorId === authorId); 
};

// promise
const getArticlesByAuthorWithPromise = (authorId) => { 
  return articleModel 
    .fetchAll() 
    .then((articles) => articles.filter((b) => b.authorId === authorId)); 
};

可以看到，使用 async/await 版本比使用 promise 版本更容易理解。如果忽略 await 关键字，代码看起来就像其他同步语言，如 Python。 另外, async/await 在主流浏览器中有原生支持。

需要注意的是，在使用 async/await 时，需要成对出现。例如，在函数中使用 await，则必须将函数定义为 async。

  • 使用 async/await 可能会产生一些误导和陷阱

async/await虽好，但是使用不当可能会产生一些问题。

  • await 并不会等待上一个异步操作完成。它只是让 JavaScript 引擎知道在这个点上应该等待，并且在异步操作完成后继续执行代码。 例如：
const getData = async () => {
  console.log('Start getting data');
  const data1 = await fetchData1();
  console.log('Data 1 received');
  const data2 = await fetchData2();
  console.log('Data 2 received');
  return { data1, data2 };
};

getData();
console.log('End of script');

这段代码会先输出"Start getting data"，然后"End of script"，最后再输出"Data 1 received"和"Data 2 received"

  • await 不能在普通函数中使用。它只能在 async 函数中使用。 例如：
const getData = () => {
  const data = await fetchData();  // TypeError: await is only valid in async function
  return data;
};
  • await 只能用于 Promise 对象。如果传入的不是一个Promise对象，会立即resolve。 例如:
const data = await 42;
console.log(data);  // 42
  • await 后面的代码会被封装在 try/catch 中，如果出错，会产生reject状态。 例如：
const getData = async () => {
  try {
    const data = await fetchData();
    return data;
  } catch (error) {
    console.error(error);
  }
};

async/await 是一种具有可读性和错误处理能力的新型异步编程方式，可以让我们更容易理解和维护异步代码。在使用 async/await 时，需要注意它依然是异步代码，不能直接和同步代码一起工作。需要使用 promise 对象或回调函数来将异步代码的结果传递给同步代码。在使用 async/await 时还要注意使用 try/catch 来处理可能出现的错误。

相关推荐

面试问了解Linux内存管理吗?10张图给你安排的明明白白!

来源：https://www.cnblogs.com/NanoDragon/p/12736887.html今天来带大家研究一下Linux内存管理。对于精通CURD的业务同学，内存管理好像离我们很远...

Linux Kernel 6.12震撼发布:实时性能飙升，开启全新计算时代!

概述LinusTorvalds在邮件列表中宣布推出LinuxKernel6.12，该版本带来了多项重要的更新和功能增强。更新亮点PREEMPT_RT支持主要内容：LinuxKernel...

linux Grub2功能、常见配置及使用方式

Grub2（GrandUnifiedBootloaderversion2）是一款功能强大的引导加载程序，提供了以下功能和常见配置：多操作系统支持：Grub2可以加载和引导多个操作系统，包括不同...

Linux内核必备知识点-platform总线详解

platform总线是学习linux驱动必须要掌握的一个知识点。本文参考已发布：Linux3.14内核一、概念嵌入式系统中有很多的物理总线：I2c、SPI、USB、uart、PCIE、APB、AHB...

linux kernel内核的头文件获取、安装等方法

交叉编译时经常会用到这些头文件。下载合适版本的linux地址：https://mirrors.aliyun.com/linux-kernel/https://mirrors.edge.kernel.o...

600个常用 Linux 命令，收藏备用!

本文为Linux命令大全，从A到Z都有总结，建议大家收藏以便查用，或者查漏补缺！A命令描述access用于检查调用程序是否可以访问指定的文件，用于检查文件是否存在accton用于打开或关闭记帐进程或...

Linux 中 `/proc/cpuinfo`文件中最常见的标志

/proc/cpuinfo是一个虚拟文件系统，在Linux系统中提供有关CPU（中央处理器）的信息。通过读取该文件，您可以获取有关处理器的详细信息，如型号、频率、核心数、缓存大小等。本文将介绍...

600个Linux命令大全，从A到Z，2023年收藏大吉!

本文为Linux命令大全（有PDF），从A到Z都有总结，建议大家收藏以便查用，或者查漏补缺！A命令描述access用于检查调用程序是否可以访问指定的文件，用于检查文件是否存在accton用于打开或关闭...

Linux下如何查看硬件信息?

我们在Linux下进行开发时，有时也需要知道当前的硬件信息，比如：CPU几核？使用情况？内存大小及使用情况？USB设备是否被识别？等等类似此类问题。下面良许介绍一些常用的硬件查看命令。lshwls...

从PXE到GRUB到VHD文件启动

今天玩点花活儿，之前的文章再探从VHD文件中启动Windows及Grub双启动VHD文件+TinyCoreLinux中研了一下GRUB和VHD文件的关联应用，那么结合PXE又会是怎么样的呢?...

bootra1n教学:Windows用户用U盘Linux实现checkra1n越狱方法

checkra1n越狱工具在前几天推出Linux版本，相信对于Windows用户可能也看得很模糊，甚至要切割硬碟到安装Linux系统太过于繁杂，这篇要来教大家最简易最快速利用U盘Linux...

不了解NUMA，就看不懂Linux内核

哈喽，我是子牙，一个很卷的硬核男人深入研究计算机底层、Windows内核、Linux内核、Hotspot源码……聚焦做那些大家想学没地方学的课程。为了保证课程质量及教学效果，一年磨一剑，三年先后做了这...

Linus Torvalds接受微软Hyper-V升级 下一代Linux启动会更快

虽然Windows的粉丝和Linux的粉丝经常喜欢进行激烈的键盘大战，但操作系统的制造商们自己也了解彼此的优缺点。毫无疑问，微软也明白这一点，事实上，它甚至鼓励用户尝试Linux，尽管是使用...

deepin使用笔记——开机卡LOGO，无法正常关机的解决办法

第一次使用deepin操作系统，很容易遇到几种情况：1，开机卡LOGO，无法进入系统。2，开机可以进入系统，但是进入系统后桌面环境无法正常打开，一直卡着什么都不能用。3，开机后看似一切正常，但关机的时...

如何检查Linux系统硬件信息?从CPU到显卡，一网打尽!

你可能会问：“我为什么要关心硬件信息？”答案很简单：硬件是Linux系统的根基，了解它可以帮你解决很多实际问题。比如：性能调优：知道CPU核心数和内存大小，才能更好地调整程序运行参数。故障排查：系统卡...

一周热门
最近发表
标签列表