ES6基础入门（四)—— promise的高级应用

最新推荐文章于 2024-07-02 08:35:50 发布

采故事的女孩

最新推荐文章于 2024-07-02 08:35:50 发布

阅读量624

点赞数

CC 4.0 BY-SA版权

分类专栏： es6 文章标签： ES6

本文链接：https://blog.youkuaiyun.com/weixin_42416812/article/details/99458536

本文介绍了ES6中Promise的all和race方法的使用。Promise.all用于处理多个异步请求，所有请求都成功后执行指定操作；Promise.race则是在任意一个请求成功后立即执行操作。通过模拟Node接口展示了这两个方法的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Promise的all方法和rase方法的使用

**
promise.all:完成多个异步请求，当在页面中需要多多个异步请求完成后，在执行某个操作
promise.rase: 多个异步请求，只要某个成功，就可以使用某个操作
（使用node造数据模拟后台服务器接口）

<script>
//希望三张图片都加载成功后，同时展现给我们的用户
//加载图片的方法：
//封装一个函数
function getImage(src){
    return new Promise((resolve,reject) =>{
        //加载图片的代码
        //创建一个img元素
        let img = document.createElement("img");
        //加载图片
        img.src = src;
        img.onload = () => {
            resolve(img);
        }
        img.onerror = () => {
            reject(err);
        }
    })
}

//三张图片成功后调用异步
//Promise.all的方法中，需要一个promise对象的数组，当数组中每个promise对象
//都进入resolve状态后，才会触发外层的promise对象，调用then方法中的成功函数
Promise.all([
     getImage("http://localhost:3000/images/news.jpg"),
     getImage("http://localhost:3000/images/ent.jpg"),
     getImage("http://localhost:3000/images/sports.jpg")
]).then(imgs => {
    imgs.forEach(img => {
        document.body.appendChild(i