0

0

JS 的 Promise 和 Async 详解

Guanhui

Guanhui

发布时间:2020-05-20 10:31:30

|

2785人浏览过

|

来源于learnku

转载

JS 的 Promise 和 Async 详解

因为 JavaScript 是单线程语言,所以同步代码一次只能执行一行。这就意味着同步代码的运行时间超过瞬间的话,它将停止其余代码的运行,直到完成运行为止。为了防止运行时间不确定的代码阻止其他代码的运行,我们需要使用异步代码。

Promise

为此,我们可以在代码中使用 Promise。Promise 表示流程运行时间不确定并且结果可能是成功或失败的对象。在 JavaScript 中创建一个 promises,我们使用 Promise 对象的构造函数来创建 promise。Promise 构造函数接受一个拥有 resolve 和 reject 参数的执行函数。两个参数也都是函数,它们让我们可以回调 promise 完成(成功调用得到返回值)或者拒绝(返回错误值并标记 promise 失败)。函数的返回值被忽略。因此,promise 只能返回 promise。

例如,我们在 JavaScript 定义一个承诺像下面的代码:

const promise = new Promise((resolve, reject) => {  
  setTimeout(() => resolve('abc'), 1000);  
});

上面的代码会创建一个一秒后返回 abc 的 promise。因为我们运行的 setTimeout 是在 executor 函数内一秒后返回值为 abc 的完成 promise,所以它是异步代码。我们无法在 setTimeout 的回调函数中返回值 abc,因此我们必须调用 resolve('abc') 来获取解析后的值。我们可以使用 then 函数来访问已完成 promise 的返回值。then 函数接受一个回调函数,该回调函数将已完成的 promise 的返回值作为参数。你可以得到你想要的值。例如,我们可以这么做:

const promise = new Promise((resolve, reject) => {  
  setTimeout(() => resolve('abc'), 1000);  
});
promise.then((val) => {  
  console.log(val);  
})

当我们运行上方代码,我们应该可以得到记录 abc。正如我们看到的,promise 会在其完成后调用 resolve 函数时提供值。

一个 promise 有三种状态。初始状态,promise 既没有成功也没有失败。完成状态,意味着操作成功完成。或者是失败状态,意味着 promise 操作失败。

一个挂起的 promise 可以通过返回值完成或者返回错误失败。当 promise 完成后,then 函数将得到相应的返回值,并传递给 then 函数的回调函数来调用。如果 promise 失败后,我们可以选择使用 catch 函数来捕获错误,该函数还可以传递给回调函数一个错误。then 和 catch 都返回一个 promise,因此它们可以一起链式使用。

例如,我们可以这么写:

const promise = (num) => {  
  return new Promise((resolve, reject) => {  
    setTimeout(() => {  
      if (num === 1) {  
        resolve('resolved')  
      } else {  
        reject('rejected')  
      }  
    }, 1000);  
  });  
}
promise(1)  
  .then((val) => {  
    console.log(val);  
  })  
  .catch((error) => {  
    console.log(error);  
  })promise(2)  
  .then((val) => {  
    console.log(val);  
  })  
  .catch((error) => {  
    console.log(error);  
  })

在上面的代码中,我们有一个函数 promise,它返回一个 JavaScript promise,其在 num 为 1 时以 resolved 值完成承诺,在 num 不为 1 时通过错误 rejected 拒绝承诺。因此我们运行:

promise(1)  
  .then((val) => {  
    console.log(val);  
  })  
  .catch((error) => {  
    console.log(error);  
  })

然后 then 函数运行,由于 num 为 1,promise(1) 函数调用会返回 promise 完成,并且解析后的值在 val 中是可用的。因此当我们运行 console.log(val),我们会得到 resolved。当我们运行下面的代码:

promise(2)  
  .then((val) => {  
    console.log(val);  
  })  
  .catch((error) => {  
    console.log(error);  
  })

catch 会运行,因为 promise(2) 函数调用失败返回 promise,并且被拒绝的错误值可用并设置为错误。因此我们运行 console.log(error) 会得到 rejected 输出。

一个 JavaScript promise 对象有一下属性:length 和 prototype。 length 是构造器参数的数量,其设置为 1,也总是只有一个。prototype 属性表示 promise 对象的原型。

promise 还有一个 finally 方法无论 promise 完成还是失败都运行的代码。finally 方法接受一个回调函数作为参数,可以运行任何你想运行的代码, 并且无论 promise 运行结果如何,都可以执行。例如,我们运行:

Promise.reject('error')  
  .then((value) => {  
    console.log(value);  
  })  
  .catch((error) => {  
    console.log(error);  
  })  
  .finally(() => {  
    console.log('finally runs');  
  })

然后我们得到 error 和 finally runs 的记录,因为原始的 promise 得到 error 而拒绝。然后运行 finally 方法中的所有代码。

使用 promise 最主要的好处是编写的异步代码,我们可以使用 promise 顺序运行它们。为此,我们可以使用 then 函数链式 promise。then 函数在 promise 完成后接收一个回调函数并运行它。在 promise 拒绝后,它还接受第二个参数。链式使用 promise,我们必须将其第一个回调函数 then 函数返回另外一个 promise。如果我们不想将另外一个 promise 链接到现有的 promise,我们可以返回其他值,就像没有一样。我们可以返回一个值,该值将在下一个 then 函数中可获取到。它还可以抛出一个错误。然后 then 返回的 promise 将被拒绝,并抛出错误。它还可以返回已经完成或拒绝的 promise,挡在其后链接的 then 函数时将获得其完成后的值,或者 catch 函数的回调中获得错误原因。

例如,我们可以这样写:

Promise.resolve(1)  
  .then(val => {  
    console.log(val);  
    return Promise.resolve(2)  
  })  
  .then(val => {  
    console.log(val);  
  })Promise.resolve(1)  
  .then(val => {  
    console.log(val);  
    return Promise.reject('error')  
  })  
  .then(val => {  
    console.log(val);  
  })  
  .catch(error => console.log(error));Promise.resolve(1)  
  .then(val => {  
    console.log(val);  
    throw new Error('error');  
  })  
  .then(val => {  
    console.log(val);  
  })  
  .catch(error => console.log(error));

在第一个例子中,我们链式调用 promise,并且都 resolve 一个值。所有的 promise 都准备返回为值。在第二个和最后一个例子中,我们拒绝了第二个 promise 或抛出一个错误。它们都做了同样的事情。第二个 promise 被拒绝了,并且错误原因会被回调函数 catch 函数记录下来。我们还可以链接挂起状态的 promise,如下方代码所示:

const promise1 = new Promise((resolve, reject) => {  
  setTimeout(() => resolve(1), 1000);  
});
const promise2 = new Promise((resolve, reject) => {  
  setTimeout(() => resolve(2), 1000);  
});
promise1  
  .then(val => {  
    console.log(val);  
    return promise2;  
  })  
  .then(val => {  
    console.log(val);  
  })  
  .catch(error => console.log(error));

回调函数 then 函数返回了 promise2,这是一个挂起状态的 promise。

方法

JavaScript 的 promise 有以下方法。

Promise.all (可迭代对象)

Promise.all 接受一个可迭代对象,该对象允许我们在某些计算机上并行运行多个 promise,并在其他计算机上连续运行多个 promise。这对于运行多个不依赖于彼此的值的 promise 非常方便。它接受一个包含 promise 的列表 (通常是一个数组) 的可迭代对象,然后返回一个 Promise,这个 Promise 在可迭代对象中的 promise 被解析时解析。

例如,我们像下面这样写代码,使用 Promise.all 来运行多个 promise:

const promise1 = Promise.resolve(1);  
const promise2 = 2;  
const promise3 = new Promise((resolve, reject) => {  
  setTimeout(() => resolve(3), 1000);  
});  
Promise.all([promise1, promise2, promise3])  
  .then((values) => {  
    console.log(values);  
  });

如果我们运行了上方的代码,然后 console.log 应该会记录下 [1,2,3]。如我们所见,只有所有的 promise 都完成后返回它的解析值。如果其中的拒绝了,我们不会得到任何解析值。相反,我们将得到由被拒绝的 promise 返回的任何错误值。它将会在第一个被拒绝的 promise 处停止,并且发送值给回调函数 catch 函数。例如,如果我们这样:

const promise1 = Promise.resolve(1);  
const promise2 = Promise.reject(2);  
const promise3 = new Promise((resolve, reject) => {  
  setTimeout(() => reject(3), 1000);  
});  
Promise.all([promise1, promise2, promise3])  
  .then((values) => {  
    console.log(values);  
  })  
  .catch(error => {  
    console.log(error);  
  });

然后我们可以在回调函数 catch 函数的 console.log 中得到两个记录。

Promise.allSettled

Promise.allSettled 返回一个 promise,该 promise 的解析在所有的 promise 解析完或拒绝后。它接受带有一组 promise 的可迭代对象,例如,一个 promise 数组。返回的 promise 的解析值是每个 promise 的最终状态的数组。例如,假设我们有:

const promise1 = Promise.resolve(1);  
const promise2 = Promise.reject(2);  
const promise3 = new Promise((resolve, reject) => {  
  setTimeout(() => reject(3), 1000);  
});  
Promise.allSettled([promise1, promise2, promise3])  
  .then((values) => {  
    console.log(values);  
  })

若我们运行上方代码,我们将获得一个包含三个条目的数组,每个条目都是一个对象,该对象有已经完成 promise 的 status 和 value 属性以及被拒绝的 promise 的 status 和 reason 属性。例如,上面的代码会记录 {status: “fulfilled”, value: 1},{status: “rejected”, reason: 2},{status: “rejected”, reason: 3}。 fulfilled 状态记录的是成功的 promise,rejected 状态为被拒绝的 promise。

TayCMS免费企业建站系统1.8 for PHP
TayCMS免费企业建站系统1.8 for PHP

由于精力有限,程序更新比较慢,请大家谅解,再次感谢支持taycms的朋友们,虽然比较慢,我们还是会一直更新下去的。谢谢您的关注。有什么建议可以到论坛提出,或者直接给我QQ留言。 2.0会有很多新功能,请关注官方论坛TayCMS 1.8 升级日志此版本修复了不少BUG1.更换图片切换JS , 不会再有错误提示2.增加资料下载模块3.更换默认模版,使程序功能和页面结构更清晰,方便参考制作模版4.修复留

下载

Promise.race

Promise.race 方法返回一个 promise,该 promise 会解析首先完成的 promise 的解析值。它接受一个带有 promise 集合的可迭代对象,例如,一个 promise 数组。如果传入的可迭代对象为空,则返回的 promise 将一直挂起。若可迭代对象包含一个或多个非 promise 值或者已经完成的 promise,Promise.race 将会返回这些条目中的第一个。例如,我们有:

const promise1 = Promise.resolve(1);  
const promise2 = Promise.resolve(2);  
const promise3 = new Promise((resolve, reject) => {  
  setTimeout(() => resolve(3), 1000);  
});  
Promise.race([promise1, promise2, promise3])  
  .then((values) => {  
    console.log(values);  
  })

然后我们看到 1 会被记录 。那是因为 promise1 是第一个被解析的,那是因为它是在下一行运行之前就被解析了。同样,如果我们的数组中有一个非 promise 值作为参数进行传入,如下代码所示:

const promise1 = 1;  
const promise2 = Promise.resolve(2);  
const promise3 = new Promise((resolve, reject) => {  
  setTimeout(() => resolve(3), 1000);  
});  
Promise.race([promise1, promise2, promise3])  
  .then((values) => {  
    console.log(values);  
  })

然后我们会得到相同的记录,因为它是我们传递给 Promise.race 方法的数组中的非 promise 值。同步代码始终运行在异步代码之前,而不论同步代码在哪里。如果我们有:

const promise1 = new Promise((resolve, reject) => {  
  setTimeout(() => resolve(1), 2000);  
});
const promise2 = new Promise((resolve, reject) => {  
  setTimeout(() => resolve(2), 1000);  
});
const promise3 = 3;  
Promise.race([promise1, promise2, promise3])  
  .then((values) => {  
    console.log(values);  
  })

然后我们记录下 3,因为 setTimeout 将回调函数放入队列中以便稍后运行,所以它将比同步代码更晚执行。

最后,如果我们有:

const promise1 = new Promise((resolve, reject) => {  
  setTimeout(() => resolve(1), 2000);  
}); 
const promise2 = new Promise((resolve, reject) => {  
  setTimeout(() => resolve(2), 1000);  
});
Promise.race([promise1, promise2])  
  .then((values) => {  
    console.log(values);  
  })

然后我们在控制台中得到记录 2,因为在一秒解析的 promise 要比两秒解析的 promise 更早解析。

Promise.reject

Promise.reject 返回一个因某种原因拒绝的 promise。拒绝带有 Error 的实例对象的 promise 非常有用。例如,如果我们有以下代码:

Promise.reject(new Error('rejected'))  
  .then((value) => {  
    console.log(value);  
  })  
  .catch((error) => {  
    console.log(error);  
  })

然后我们得到 rejected 记录。

Promise.resolve

Promise.resolve 返回一个已解析为传入 resolve 函数参数的值的 promise。我们也可以传递一个带有 then 属性的对象,它的值是 promise 的回调函数。如果该值具有 then 方法,则将使用 then 函数完成 promise。也就是说,then 函数值的第一个参数与 resolve 相同,以及第二个参数与 reject 相同。例如,我们可以编写如下代码:

Promise.resolve(1)  
  .then((value) => {  
    console.log(value);  
  })

然后我们得到 1 记录,因为 1 是我们传递给 resolve 函数来返后具有解析值 1 的承诺的值。

如果我们传入的对象内部带有 then 方法,如下代码所示:

Promise.resolve({  
    then(resolve, reject) {  
      resolve(1);  
    }  
  })  
  .then((value) => {  
    console.log(value);  
  })

然后我们得到记录的值 1。这是因为 Promise.resolve 函数将运行 then 函数,设置为 “then” 属性的函数的 “resolve” 参数将被假定为承诺中称为 “resolve” 函数的函数。并将该函数的 resolve 参数设置为 then 属性可以看作 promise 中一个叫做 resolve 函数。如果我们将传入 then 中的对象替换为 inject 函数,然后我们就可以得到被拒绝的 promise。代码如下所示:

Promise.resolve({  
    then(resolve, reject) {  
      reject('error');  
    }  
  })  
  .then((value) => {  
    console.log(value);  
  })  
  .catch((error) => {  
    console.log(error);  
  })

在上面的代码中,我们会得到 error 记录,这是因为 promise 被拒绝了。

Async 和 Await

使用 async 和 await,我们可以缩短 promise 代码。使用 async 和 await 之前前,我们必须得用 then 函数并且在 then 函数中放入回调函数作为所有的参数。这就使得我们有很多 promise 时代码冗长至极。相反,我们可以使用 async 和 await 语法来替代 then 函数以及相关回调。例如,我们可将以下代码缩短为:

const promise1 = new Promise((resolve, reject) => {  
  setTimeout(() => resolve(1), 2000);  
});
const promise2 = new Promise((resolve, reject) => {  
  setTimeout(() => resolve(2), 1000);  
});
promise1  
  .then((val1) => {  
    console.log(val1);  
    return promise2;  
  })  
  .then((val2) => {  
    console.log(val2);  
  })

写成:

const promise1 = new Promise((resolve, reject) => {  
  setTimeout(() => resolve(1), 2000);  
});  
const promise2 = new Promise((resolve, reject) => {  
  setTimeout(() => resolve(2), 1000);  
});
(async () => {  
  const val1 = await promise1;  
  console.log(val1)  
  const val2 = await promise2;  
  console.log(val2)  
})()

我们使用 await 来替换 then 和回调函数。然后,我们就可以将每个 promise 的解析值分配为变量。注意,如果我们为 promise 代码使用 await,那么我们必须像上例那样添加 async 到函数签名中。为了捕获错误,我们使用 catch 子句取代链式 catch 函数。另外,我们没有在底部链式调用 finally 函数以在 promise 结束时运行代码,而是在 catch 子句后使用 finally 子句。

例如,我们可以这样写:

const promise1 = new Promise((resolve, reject) => {  
  setTimeout(() => resolve(1), 2000);  
});  
const promise2 = new Promise((resolve, reject) => {  
  setTimeout(() => reject('error'), 1000);  
});
(async () => {  
  try {  
    const val1 = await promise1;  
    console.log(val1)  
    const val2 = await promise2;  
    console.log(val2)  
  } catch (error) {  
    console.log(error)  
  } finally {  
    console.log('finally runs');  
  }})()

在上面的代码中,我们获得了分配给变量的 promise 的解析值,而不是在 then 函数的回调中获取值,例如在 const response = await promise1 上面的一行。另外,我们使用 try...catch...finally 块来捕获被拒绝的 promise 的错误,以及 finally 子句替代 finally 函数,其无论 promise 执行结果如何,该代码都可以运行。

想其他使用 promise 的函数一样,async 函数始终返回 promise,并且不能返回其他任何东西。在上面的示例中,我们证明了与使用带有回调函数作为参数传递的 then 函数相比,我们可以更短的方式使用 promise。

结束语

使用 promise,让我们编写异步代码更容易。promise 是表示一个处理的运行时间不确定并且结果会成功也会失败的对象。在 JavaScript 中创建一个 promises,我们使用 Promise 对象,该对象是用于创建 promise 的构造函数。

Promise 构造函数接受一个拥有 resolve 和 reject 参数的执行函数。两个参数都是函数,它们让我们可以回调 promise 完成(成功调用得到返回值)或者拒绝(返回错误值并标记 promise 失败)。 The 函数的返回值被忽略。因此,promise 只能返回 promise。

因为 promise 返回 promise,所以 promise 是可链式调用。promise 的 then 函数可以抛出一个错误,返回解析值,或者其他 promise(挂起、已完成或已拒绝的 promise)。

推荐教程:《PHP教程

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

164

2026.01.28

包子漫画在线官方入口大全
包子漫画在线官方入口大全

本合集汇总了包子漫画2026最新官方在线观看入口,涵盖备用域名、正版无广告链接及多端适配地址,助你畅享12700+高清漫画资源。阅读专题下面的文章了解更多详细内容。

34

2026.01.28

ao3中文版官网地址大全
ao3中文版官网地址大全

AO3最新中文版官网入口合集,汇总2026年主站及国内优化镜像链接,支持简体中文界面、无广告阅读与多设备同步。阅读专题下面的文章了解更多详细内容。

73

2026.01.28

php怎么写接口教程
php怎么写接口教程

本合集涵盖PHP接口开发基础、RESTful API设计、数据交互与安全处理等实用教程,助你快速掌握PHP接口编写技巧。阅读专题下面的文章了解更多详细内容。

2

2026.01.28

php中文乱码如何解决
php中文乱码如何解决

本文整理了php中文乱码如何解决及解决方法,阅读节专题下面的文章了解更多详细内容。

4

2026.01.28

Java 消息队列与异步架构实战
Java 消息队列与异步架构实战

本专题系统讲解 Java 在消息队列与异步系统架构中的核心应用,涵盖消息队列基本原理、Kafka 与 RabbitMQ 的使用场景对比、生产者与消费者模型、消息可靠性与顺序性保障、重复消费与幂等处理,以及在高并发系统中的异步解耦设计。通过实战案例,帮助学习者掌握 使用 Java 构建高吞吐、高可靠异步消息系统的完整思路。

8

2026.01.28

Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

24

2026.01.27

拼多多赚钱的5种方法 拼多多赚钱的5种方法
拼多多赚钱的5种方法 拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

122

2026.01.26

edge浏览器怎样设置主页 edge浏览器自定义设置教程
edge浏览器怎样设置主页 edge浏览器自定义设置教程

在Edge浏览器中设置主页,请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”,点击“添加新页面”并输入网址。若要使用主页按钮,需在“外观”设置中开启“显示主页按钮”并设定网址。

72

2026.01.26

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PHP课程
PHP课程

共137课时 | 9.9万人学习

JavaScript ES5基础线上课程教学
JavaScript ES5基础线上课程教学

共6课时 | 11.2万人学习

PHP新手语法线上课程教学
PHP新手语法线上课程教学

共13课时 | 0.9万人学习

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

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