在 JavaScript 中,Promise 是一个对象,它表示一个可能还不可用,但会在未来解决的值。Promises 用于处理异步操作,例如发出网络请求或访问数据库,其中结果不是立即可用的。
如果你准备好了,我想开始我们的冒险……
承诺如何运作?
APromise是创建承诺时不一定知道的值的代理。它允许您将处理程序与异步操作的最终成功值或失败原因相关联。这让异步方法像同步方法一样返回值:异步方法不是立即返回最终值,而是返回一个在未来某个时间点提供值的承诺。
Promise 具有三种可能的状态:
动图
Pending: Promise 的初始状态。Promise 既未实现也未被拒绝。
Fulfilled: Promise 已解决,结果值可用。
Rejected: Promise 已被拒绝并发生错误。
一旦 Promise 被解决,它就不能被重新设置。or函数只能调用一次,以后对这些函数的任何调用都不会产生任何效果resolve()。reject()已解决的 Promise 的不变性是一个重要的特性,因为它确保 Promise 的值保持一致和可预测。一旦 Promise 被解决,它的值就不能改变,这有助于防止意外行为并使代码更容易推理。
如何创建承诺?
Promise 是使用Promise构造函数创建的,它接受一个参数,一个称为executor 的函数。executor 函数有两个参数:resolve和reject。这些是在 Promise 被fulfilled或rejected时调用的函数。
告诉你我的意思..
上面示例中的 Promise 将在一秒后 resolve,并且 resolved Promise 的值将是 users 数组。
创建 Promise 后,您可以使用该then方法附加一个回调函数,该回调函数将在 Promise 完成时调用。该then方法有两个参数:解析值的回调函数和拒绝值的回调函数。
告诉你我的意思..
继续我们的冒险,让我们看一个被拒绝的 Promise 的例子。
告诉你我的意思..
链式承诺
以下方法用于将进一步的操作与已确定的承诺相关联。由于这些方法返回承诺,因此可以将它们链接起来
Promise.prototype.then()
Promise.prototype.catch()
Promise.prototype.finally()
动图
在 JavaScript 中链接 promise 涉及创建一系列依次执行的 promise。链中的每个承诺都取决于前一个承诺的成功完成,因此如果链中的任何承诺失败,则整个链都会失败。
让我们看看如何在 JavaScript 中链接承诺:
在这里,该fetchData()函数用于从远程 API 获取数据并对其执行一些操作。该fetchData()函数返回一个使用操作结果解析的 Promise。
Promise 链首先从 API 获取用户数据,然后使用第一个用户的 ID 获取他们的帖子,最后使用第一个帖子的 ID 获取该帖子的评论。链中的每个then()方法都处理前一个 Promise 的解析值,最后一个catch()方法处理链中发生的任何错误。
then()我们可以根据要求使用方法创建许多链。与同步代码一样,链接将产生一个串行运行的序列。让我们看一个简单的例子..
承诺的好处
在处理 JavaScript 中的异步操作时,Promises 比传统的基于回调的方法有几个好处。一些主要好处包括:
更好的可读性:与传统的基于回调的方法相比,Promises 允许您编写更具可读性和更易于理解的代码。使用 Promises,您可以按顺序将异步操作链接在一起,这使得操作的执行顺序一目了然。
改进的错误处理: Promises 使处理异步操作期间发生的错误变得更加容易。使用 Promises,您可以使用 catch 方法来处理链中任何步骤中发生的错误,而不必为每个步骤单独处理错误。
避免回调地狱: Promises 可以帮助您避免“回调地狱”,即您拥有一连串嵌套的回调,这会变得难以管理和调试。使用 Promises,您可以将异步操作链接在一起,而无需嵌套多个级别的回调。
返回值的能力: Promises 允许您从异步操作返回一个值,这使得将一个操作的结果按顺序传递给另一个操作变得更加容易。当您需要按顺序执行多个异步操作并且需要在下一个操作中使用每个操作的结果时,这尤其有用。
更好的兼容性: Promises 是现代 JavaScript 中的标准化功能,并且受到所有现代浏览器和 Node.js 的支持。这意味着 Promises 可以在不同的环境中使用,而不需要为每个环境使用不同的代码。
如何取消承诺?
在现代 JavaScript 中——不,Promise 一旦创建就无法取消。它将执行其代码并解决或拒绝,并且没有内置的方式来取消操作。
您可以使用一些技术来模拟取消:
超时:如果解决时间太长,您可以使用超时来拒绝 Promise。如果您正在发出网络请求并希望限制所花费的时间,则此技术很有用。
中止网络请求:您可以使用中止控制器来中止网络请求。Fetch API 提供了一个 AbortController API,允许您在网络请求完成之前取消它。
使用标志:您可以在代码中使用标志来模拟取消。您可以将标志设置为 true 以指示应取消该操作,然后检查您的 Promise 代码中的标志以确定是继续还是拒绝 Promise。
值得注意的是,这些技术都没有真正取消 Promise;他们只是提早拒绝它。如果您需要真正的取消,您可能需要使用提供取消支持的库,例如rxjs或bluebird。
蓝鸟承诺取消
Bluebird是一个流行的 JavaScript Promise 库,它提供高级功能,包括 Promise 取消。Promise 取消是取消 Promise 的能力,这对于取消正在进行的或长时间运行的异步操作很有用。
在Bluebird的帮助下,使用该Promise.cancel()方法实现了Promise取消。此方法不是标准 Promise API 的一部分,并且特定于 Bluebird。
要在 Bluebird 中使用 Promise 取消,您需要使用new Promise()构造函数创建一个可取消的 Promise 并将取消函数作为参数传递。当 Promise 被取消时,将调用 cancel 函数。
并行的多个承诺
在Promises的帮助下,可以更轻松地并行管理和执行多个异步操作,并等待所有操作完成后再继续。
告诉你我的意思..
使用语法创建四个承诺new Promise()。每个承诺在使用方法的特定超时期限后被解决或拒绝setTimeout()。该error函数被定义为将任何错误记录到控制台。
创建上述承诺后,现在我们将看到使用不同承诺方法的实例。
Promise.all() 方法
下面的实例使用Promise.all()方法,该方法接受一组承诺并等待所有承诺得到履行。一旦所有的 promise 都得到解决,then()就会执行方法,该方法按照它们在 promise 数组中传递的顺序返回一个值数组。在这种情况下,所有三个承诺都已解决,并且它们的值被记录到控制台。
这是一个很好的方法,例如使用两个不同的请求获取数据,然后在两个请求完成后将它们组合起来。
Promise.any() 方法
下面的实例使用的Promise.any()方法接受一组承诺并等待其中任何一个被履行。一旦第一个承诺得到解决,then()就会执行返回第一个承诺的已解决值的方法。在这种情况下,第三个承诺在其他两个之前得到解决,并且它的值被记录到控制台。
Promise.race() 方法
下面的实例使用的Promise.race()方法接受一组承诺并等待第一个承诺被解决或拒绝。一旦第一个承诺被解决,then()方法就会被执行,它返回第一个已解决承诺的已解决或被拒绝的值。在这种情况下,第三个承诺在其他两个之前得到解决,因此它的值被记录到控制台。
Promise.allSettled() 方法
下面的实例使用的Promise.allSettled()方法接受一组承诺并等待所有承诺得到解决,即 resolved 或 rejected。一旦所有的承诺都得到解决,then()就会执行返回一个对象数组的方法,每个对象包含每个承诺的状态和价值或原因。在这种情况下,所有承诺都已解决,因此所有承诺的状态和值或原因都记录到控制台。
结论
Fetch API 是旧 XMLHttpRequest 对象的现代替代品,它基于 Promises。当您使用 Fetch API 发出请求时,您会得到一个解析为响应对象的 Promise。这允许您使用该then()方法以清晰易读的方式处理响应。
异步函数是 JavaScript 的新成员,它们构建在 Promises 之上。异步函数允许您编写看起来像同步代码的异步代码,使其更易于阅读和编写。异步函数使用 await 关键字等待 Promises 在继续之前解析,从而可以编写看起来像一系列同步语句的异步代码。
在这两种习惯用法中,Promises 都用于以清晰易读的方式处理异步操作。通过使用 Promises,您可以避免回调地狱并编写易于推理的异步代码。
动机
提醒:
无论别人怎么说和怎么想,你都是很棒的..
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)