promise

最新推荐文章于 2024-11-11 19:29:13 发布

userZhangGuoDong

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量130

点赞数

文章标签： javascript 前端 typescript

本文链接：https://blog.csdn.net/userZhangGuoDong/article/details/123522071

版权

大白话讲解Promise（一） - 吕大豹 - 博客园

概况：

1、 Promise是一个构造函数（对象），

2、本身有all、race、reject、resolve方法（不用new实例，可直接调用）

3、原型有then、catch方法（通过实例调用）

精髓：支持异步并依照结果作为状态，根据状态选择逻辑

分析：resolve和reject方法等异步执行完之后才会调用，也就是说在操作异步数据时，不会落空，都有一个回应。

场景：

回调地狱链式

多接口同时请求结束后，统一渲染页面 Promise.all()

//runAsync1(), runAsync2(), runAsync3()都是Promise实例

Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});

/*results: [runAsync1的结果,runAsync2的结果,runAsync3的结果]
*/

请求时间过长，设置延迟报错 Promise.race()

//可做公共函数
const timeOut=(delay)=>{
    return Promise((reslove,reject)=>{
        setTimeOut(()=>{
            reject('请求超时')
        },dalay)
    })
}


const getImages=(p)=>{
        return Promise((reslove,reject)=>{
            getImageServcie(p).then(res=>{
                resolve(res)
        }),catch(err=>{
              reject(err)
        })
    })

}


Promise.race([timeOut(5000),getImages()]).then(res=>{
        consloe.log(res)
}).catch(err=>{
        console.log(err)
})

/**
    resolve的结果会被then的第一个函数接收
    reject的结果会被catch或then的第二个函数接受

    catch的优点，在于会捕获then中的报错，不会阻塞js的运行

*/