es6 Promise

Posted 2021-01-15 luluyang

Promise是对象是一个构造函数，用来生成一个Promise实例，有then、catch等方法。对象的状态不受外界影响，有三种状态。pending（进行中）、fulfilled（已经成功）、reject（已经失败），只有异步操作的结果可以决定哪一种状态，任何其他的操作都无法改变这个状态。

 

一个异步执行的，

resolve和reject函数带有参数时，那么他们的参数会被传给回调函数。reject函数的参数通常是Error对象的实例。

let p = new Promise(function(resolve, reject) {
　　console.log(‘11‘);
});
p.then(function() {
　　console.log(‘22.‘);
});
console.log(‘Hi!‘);//11 Hi!
 
let p2 = new Promise(function(resolve, reject) {
　　console.log(‘11‘);
　　resolve();
});
p2.then(function() {
　　console.log(‘22.‘);
});
console.log(‘Hi!‘);//11 Hi! 22.

Promise的构造函数接收一个参数是函数，并且传入两个参数：resolve，reject，初步不准确的理解分别表示异步操作执行成功后的回调函数和异步操作执行失败的回调函数

 resolve用法：

function runAsync(){
var p = new Promise(function(resolve, reject){
　　//做一些异步操作
　　resolve(‘1‘);
　　console.log(‘2‘);
});
　　return p;
}
runAsync().then(function(data){
　　console.log(data);
});//2 1

 

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(reason, data){
　　console.log(‘rejected‘);
　　console.log(reason);
　　}
);
//rejected 数字太大了
//resolved 1

 

catch用法：和then的第二个参数一样，用来指定reject的回调，例如：

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

如果不用catch，代码运行到未定义的somedata那里直接报错不往下运行了，但是用了catch，会得到下面的结果resolved 3 rejected ReferenceError: somedata is not defined at <anonymous>:5:17

 

all的用法：

在所有的异步操作执行完成后才执行回调，可以并行执行多个异步操作。应用如打开网页时我们可以预先加载需要用到的所有各种资源如图片以及各种静态文件，等所有的都加载完毕再进行页面的初始化。

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

只有runAsync1和runAsync2的状态都变成fulfilled，最后才能变成fulfilled状态执行最后的回调，如果有一个rejected，最后就会变成rejected,此时第一个被rejected的实例返回值传给回调函数

 

race用法：谁跑的快以谁为准执行回调

Promise.race([runAsync1(),runAsync2()]).then(function(results){
　　console.log(results);
})
//异步任务1执行完成 随便什么数据1 异步任务2执行完成