ES6 promise 用法

最新推荐文章于 2020-08-23 17:35:48 发布

转载最新推荐文章于 2020-08-23 17:35:48 发布 · 48 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dadouF4/p/10190430.html

本文深入讲解Promise对象的创建、使用及链式调用，演示如何通过Promise.all和Promise.race实现并发与竞速的异步操作，同时提供实例代码帮助理解。

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

参考博客：https://www.cnblogs.com/whybxy/p/7645578.html

准备三个function备用：

function runAsync1(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务1执行完成');
            resolve('随便什么数据1');
        }, 3000);
    });
    return p;            
}
function runAsync2(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务2执行完成');
            resolve('随便什么数据2');
        }, 1000);
    });
    return p;            
}
function runAsync3(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务3执行完成');
            resolve('随便什么数据3');
        }, 2000);
    });
    return p;            
}

　　---------------------------------------------

从这里开始进入正题

Promise定义：Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确，按照标准来讲，resolve是将Promise的状态置为fullfiled，reject是将Promise的状态置为rejected。

Promise使用：

function runAsync(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('执行完成');
            resolve('随便什么数据');
        }, 2000);
    });
    return p;            
}
runAsync()；

Promise链式操作用法：

runAsync1()
.then(function(data){
    console.log(data);
    return runAsync2();
})
.then(function(data){
    console.log(data);
    return runAsync3();
})
.then(function(data){
    console.log(data);
});

Promise的then方法：接收两个function为参数，fn1的参数为resolve的数据，fn2的参数为reject的数据

function getNumber(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            var num = Math.ceil(Math.random()*10); //生成1-10的随机数
            if(num<=5){
                resolve(num);
            }
            else{
                reject('数字太大了');
            }
        }, 2000);
    });
    return p;            
}

getNumber()
.then(
    function(data){
        console.log('resolved');
        console.log(data);
    }, 
    function(data){
        console.log('rejected');
        console.log(data);
    }
);

Promise的catch方法：方法一用来指定reject的回调　

getNumber()
.then(function(data){
    console.log('resolved');
    console.log(data);
})
.catch(function(data){
    console.log('rejected');
    console.log(data);
});

　　方法二捕捉then的的异常

getNumber()
.then(function(data){
    console.log('resolved');
    console.log(data);
    console.log(somedata); //此处的somedata未定义
})
.catch(function(data){
    console.log('rejected');
    console.log(data);
});

Promise的all方法：此方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。执行原则是谁跑的慢，以谁为准执行回调

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

Promise的race方法：race的用法与all一样，但是执行原则是谁跑的块，以谁为准执行回调　　

//请求某个图片资源
function requestImg(){
    var p = new Promise(function(resolve, reject){
        var img = new Image();
        img.onload = function(){
            resolve(img);
        }
        img.src = 'xxxxxx';
    });
    return p;
}

//延时函数，用于给请求计时
function timeout(){
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('图片请求超时');
        }, 5000);
    });
    return p;
}

Promise
.race([requestImg(), timeout()])
.then(function(data){
    console.log(data);
})
.catch(function(data){
    console.log(data);
});

转载于:https://www.cnblogs.com/dadouF4/p/10190430.html