当前位置: 代码网 > it编程>编程语言>Javascript > 深入理解Promise.all和Promise.race

深入理解Promise.all和Promise.race

2024年07月28日 Javascript 我要评论
theme: fancy在现代的JavaScript编程中,处理异步操作是一个常见的任务。为了更加优雅地处理异步代码,ES6引入了Promise这一概念,它是一种用于处理异步操作的设计模式,提供了一种更结构化、更可靠的方式来处理异步任务。本文将深入探讨JavaScript中的Promise以及其两个常用方法:Promise.race() 和 Promise.all()。1. Promi...

theme: fancy

在现代的javascript编程中,处理异步操作是一个常见的任务。为了更加优雅地处理异步代码,es6引入了promise这一概念,它是一种用于处理异步操作的设计模式,提供了一种更结构化、更可靠的方式来处理异步任务。本文将深入探讨javascript中的promise以及其两个常用方法:promise.race()promise.all()

1. promise基础概念

promise是一种表示异步操作的对象,它可以处于三种状态之一:待定(pending)、已解决(fulfilled)和已拒绝(rejected)。在创建一个promise时,我们可以通过传递一个执行函数来定义异步操作,这个函数接收两个参数:resolverejectresolve 用于将promise从待定状态变为已解决状态,而 reject 用于将promise变为已拒绝状态。

下面是一个简单的示例,展示了如何创建和使用一个promise:

```js const mypromise = new promise((resolve, reject) => { settimeout(() => { const randomnumber = math.random(); if (randomnumber > 0.5) { resolve(randomnumber); } else { reject('random number is too small'); } }, 1000); });

mypromise.then(result => { console.log('resolved:', result); }).catch(error => { console.error('rejected:', error); }); ```

2. promise.race():竞速解决

promise.race() 方法允许我们同时发起多个异步操作,并在其中一个操作解决(fulfilled)或拒绝(rejected)时得到结果。它的语法如下: js promise.race([promise1, promise2, ...])

其中,promise1promise2等为promise对象数组。新的promise的状态将与第一个解决或拒绝的promise的状态相同。

考虑这样一个场景,我们需要从多个数据源获取数据,但只关心最快返回的结果。这时,promise.race() 就派上用场了。例如:

```js const fetchdatafromsource1 = fetch('https://source1.com/data'); const fetchdatafromsource2 = fetch('https://source2.com/data'); const fetchdatafromsource3 = fetch('https://source3.com/data');

const racepromise = promise.race([fetchdatafromsource1, fetchdatafromsource2, fetchdatafromsource3]);

racepromise.then(data => { console.log('fastest source:', data); }).catch(error => { console.error('error from fastest source:', error); }); ``` 练习: 2637. 有时间限制的 promise 对象 - 力扣(leetcode)

题解:

```js /** * @param {function} fn * @param {number} t * @return {function} */ var timelimit = function (fn, t) { return async function (...args) { var m = [fn(...args), new promise((resolve, reject) => { settimeout(() => { reject("time limit exceeded"); }, t); })];

return promise.race(m)

}

};

/** * const limited = timelimit((t) => new promise(res => settimeout(res, t)), 100); * limited(150).catch(console.log) // "time limit exceeded" at t=100ms */ ```

3. promise.all():等待全部解决

promise.race()不同,promise.all() 方法要求传入的所有promise都必须解决(fulfilled)才能得到结果,否则,只要有一个promise被拒绝(rejected),整个新的promise就会被拒绝。

使用promise.all() 可以同时发起多个异步操作,然后等待它们全部完成。这在需要同时获取多个资源并等待全部资源准备好时非常有用。

下面是一个示例,展示如何使用promise.all() 并行请求多个api数据:

```js const fetchuserdata = fetch('https://api.com/user'); const fetchposts = fetch('https://api.com/posts'); const fetchcomments = fetch('https://api.com/comments');

const allpromise = promise.all([fetchuserdata, fetchposts, fetchcomments]);

allpromise.then(responses => { const [userdata, posts, comments] = responses; console.log('user data:', userdata); console.log('posts:', posts); console.log('comments:', comments); }).catch(error => { console.error('error:', error); }); ```

4. 总结

总而言之,promise是处理异步操作的关键工具,它提供了一种更结构化、更清晰的方式来处理异步任务。通过promise.race() 可以有效地竞速解决多个异步操作,而 promise.all() 则可以等待多个异步操作全部完成,从而更高效地处理多个资源的获取和处理。

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com