promise的理解和使用

前端 专栏收录该内容
18 篇文章 0 订阅

es6中出现的promise可以用来处理异步请求。顺便说一句:promise、MutationObserver属于微服务,setTimeout、setInterval、requestAnimationFrame、整段的script属于宏服务。

new Promise

创建promise并添加回调,串联方式

new Promise((resolve, reject) => {
    setTimeout(function () {
        var i = Math.random();
        if (i > 0) {
            resolve();
        } else {
            reject();
        }  
    }, 100);
}).then(function (result) {
    // 成功
}).catch(function (error) {
    // 失败
})

Promise.all

并行执行异步任务,都成功才执行成功回调,有一个失败就执行失败回调。
应用场景:页面需要执行一系列异步任务之后才进行后续操作。

var promiseArray = [];
promiseArray.push(new Promise((resolve, reject)=>{
    // 执行异步任务1
}));
promiseArray.push(new Promise((resolve, reject)=>{
    // 执行异步任务2
}));
Promise.all(promiseArray).then(function (results) {
	// 两个异步任务都执行成功的回调
    // results是结果数组,顺序跟promiseArray顺序一致
}).catch(error => {
    // 先执行失败任务的参数error
})

Promise.race

并行执行异步任务,只要有一个完成就执行回调,后完成的抛弃。
应用场景:不同的方式执行异步任务,目的是一样的,然后谁返回的快用谁。

var promiseArray = [];
promiseArray.push(new Promise((resolve, reject)=>{
    // 执行异步任务1
}));
promiseArray.push(new Promise((resolve, reject)=>{
    // 执行异步任务2
}));
Promise.race(promiseArray).then(function (result) {
	// 先执行完毕的异步任务成功的回调
}).catch(function (error) {
    // 先执行完毕的异步任务失败的回调
})
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值