Promise.all() 与 Promise.race()

最新推荐文章于 2024-12-31 11:07:16 发布

原创最新推荐文章于 2024-12-31 11:07:16 发布 · 285 阅读

CC 4.0 BY-SA版权

本文详细解析了JavaScript中的Promise.all()和Promise.race()函数的使用方法，通过具体的图片加载示例，展示了如何利用这两个函数来处理并发请求，以及它们在处理多个异步操作时的不同行为。

Promise.all():

复制代码
1 <body>
2 <div id="pic" ></div>
3 <script>
4    const imgs = [
5       'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588606301799&di=26e46595e4a886700fb38dd008909934&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201710%2F07%2F20171007134945_84Cnd.jpeg',
6       'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1426668281,3085506529&fm=26&gp=0.jpg',
7       'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588606301800&di=28eb474abf2022fb1f4f7e1525882fa3&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F7LsWdDW5_xN3otqbppnN2DJv%2Fzhidao%2Fpic%2Fitem%2Fdcc451da81cb39db719c5aa3db160924aa1830e2.jpg'
8    ];
9
10
11    function loadImagePro(picUrl) {
12       return new Promise(function (resolve, reject) {
13          const img = new Image();
14          img.src = picUrl;
15          img.onload = () => void resolve(img); // 将标签元素传入resolve
16          // img.onerror = reject('加载失败');
17       });
18    }
19    /*
20    // 返回一个Promise实例组成的数组
21    const promiseArr = imgs.map(picUrl => loadImagePro(picUrl));
22
23    Promise.all(promiseArr)
24    .then(function (picArr) {
25       console.log(picArr); // 返回所有标签元素组成的数组
26       picArr.forEach(function (item) {
27          console.log(item);
28          document.getElementById('pic').appendChild(item);
29       });
30    });
31    */
32
33    // ES6 写法
34    Promise.all(imgs.map(picUrl => loadImagePro(picUrl)))
35    .then(picArr => {
36    picArr.forEach(item => document.getElementById('pic').appendChild(item));
37    });
38    console.log('末尾');
39 </script>
40 </body>
复制代码

Promise.race():

复制代码
1 <body>
2 <div id="pic" ></div>
3 <script>
4    const imgs = [
5       'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588606301799&di=26e46595e4a886700fb38dd008909934&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201710%2F07%2F20171007134945_84Cnd.jpeg',
6       'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1426668281,3085506529&fm=26&gp=0.jpg',
7       'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588606301800&di=28eb474abf2022fb1f4f7e1525882fa3&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F7LsWdDW5_xN3otqbppnN2DJv%2Fzhidao%2Fpic%2Fitem%2Fdcc451da81cb39db719c5aa3db160924aa1830e2.jpg'
8    ];
9
10
11    function loadImagePro(picUrl) {
12    return new Promise(function (resolve, reject) {
13       const img = new Image();
14       img.src = picUrl;
15       img.onload = () => void resolve(img); // 将标签元素传入resolve
16       // img.onerror = reject('加载失败');
17    });
18    }
19
20    // 返回一个Promise实例组成的数组
21    const promiseArr = imgs.map(picUrl => loadImagePro(picUrl));
22
23    // 只接收promiseArr数组中，最先返回的promise实列，然后执行这个实例的.then()
24    // Promise.race(promiseArr).then(function (item) {// 接收到Promise.race返回的标签元素
25    // document.getElementById('pic').appendChild(item);
26    // });
27
28    // ES6 写法
29    Promise.race(imgs.map(picUrl => loadImagePro(picUrl))).then(item => document.getElementById('pic').appendChild(item));
30
31    console.log('末尾');
32 </script>
复制代码