promise的理解和使用

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) {
    // 先执行完毕的异步任务失败的回调
})
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读