es6 --- new promise 详解

总结：

Promise 是一个对象，也是一个构造函数。是js对异步操作的一种解决方案，为异步操作提供了统一的接口。

promise的状态：

Pending：进行中
Resolved(Fulfilled)：已完成
Rejected：已失败

.then() 和 .catch()：

　　Promise构造器接受一个函数作为参数，这个函数有两个参数：resolve，reject，分别代表这个Promise实例成功之后的回调函数和失败之后的回调函数。

Promise.all() 和 Promise.race()：

　　all方法的效果实际就是谁跑的慢，那么就以谁为准来执行回调，而race则相反，谁跑的快，就以谁为准来执行回调。

1.直观感受一下，什么事 new promise.
　　

　　promise 是一个构造函数，自己身上有：all,resolve,reject,等这几个熟悉的方法，原型prototypel里有：then,catch等方法，说明通过 promise New 出来的对象都含有这些方法。

2.下面New一个看看：
　　

　　promise接受一个函数，函数里面传入两个值：resolve和reject,分别代表异步操作执行成功的回调函数，以及异步操作执行失败后的回调函数。其实这里形容成功与失败并不是很标准。其实是resolve是将Promise的状态置为fullfiled，reject是将Promise的状态置为rejected。

　　在上面的代码中，我们执行了一个异步操作，也就是setTimeout，2秒后，输出“执行完成”，并且调用resolve方法。注意！我只是new了一个对象，并没有调用它，我们传进去的函数就已经执行了。
　　这是需要注意的一个细节。所以我们用Promise的时候一般是包在一个函数中，在需要的时候去运行这个函数，如：

function runAsync(){
    var p = new Promise(function(resolve,reject){
　　　　// 做一些异步操作，比如请求接口
　　　　setTimeout(function(){
　　　　　　console.log('执行完毕')
　　　　　　resolve('随便什么数据！')
　　　　})
    })
　　return p
}
runAsync()

这时候你会有两个疑问，1.包装一个函数有什么用？2.resolve('随便什么数据！') 有什么用？
在我们包装好一个函数后，会return出Promise对象，也就是上面代码中的 p, 也就是说，我们执行这个函数，会得到一个Promise对象，还记得Promise 对象上有then,catch方法把？

看下面代码：

runAsync().then(function(data){
   cosole.log(data) 
   // data 是传过来的数据，可以在下面用Data做一些操作
     
})

在runAsync()上调用then()方法，then接收一个函数，并且能拿到runAsync中调用resolve时传过来的参数。
运行这段代码，2S后会输出 ‘执行完毕' ，紧接着输出“随便什么数据”。
现在你应该有所领悟了，thenl里面的函数就像我们平时调用的回调函数，能够在 runAsync 这个异步任务执行完毕之后被执行。这就是Primise的作用了，
简单来说，把原来的回调写法分离出来，然后再用链式方法执行回调函数。

reject的用法：

到这里，你应该对“Promise是什么玩意”有了最基本的了解，那么我们接着来看看ES6的Promise还有哪些功能。我们上面只用了resolve方法，下面我们试试reject。

他是做什么的呢？我们上面的栗子中，只有成功之后的回调，还没有失败的情况，rejectj的作用就是把Promise的状态设置为rejected,这样我们就能在then中捕捉到失败情况的回调。请看下面的栗子：

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)
　　})
　　retuen p

}

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

getNumber 函数用来获取一个数字，数字小于或等于5时，我们认为‘成功’，调用resolve修改Promise状态，否则我们认为'失败'，则调用reject并传递一个参数，作为失败原因。
调用getNumber,并且在then中传入两个参数，第一个参数对应resolve,第二个参数对应reject。

catch的用法：

我们知道Promise对象除了then方法，还有一个catch方法，它是做什么用的呢？其实它和then的第二个参数一样，用来指定reject的回调，用法是这样：

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

效果和写在then的第二个参数里面一样。如果都写上，只会进入执行then的第二个参数的方法里。不过它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。请看下面的代码：

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

在resolve回调中，我们输出一个未定义的值，如果我们不用Promise,代码运行到这里就会报错，不往下面运行了，但是这里的结果会进入catch方法里。而且把错误原因传到了data参数中。即便是有错误的代码也不会报错了，这与我们的try/catch语句有相同的功能。

all方法

Promise的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;            
}
function runAsync3(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务3执行完成');
            resolve('随便什么数据3');
        }, 2000);
    });
    return p;            
}
Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});

用Promise.all来执行，all接收一个数组参数，里面的值最终都算返回Promise对象。这样，三个异步操作的并行执行的，等到它们都执行完后才会进到then里面。那么，三个异步操作返回的数据哪里去了呢？都在then里面呢，all会把所有异步操作的结果放进一个数组中传给then，就是上面的results。所以上面代码的输出结果就是：

有了all，你就可以并行执行多个异步操作，并且在一个回调中处理所有的返回数据，是不是很酷？
有一个场景是很适合用这个的，一些游戏类的素材比较多的应用，打开网页时，预先加载需要用到的各种资源如图片、flash以及各种静态文件。所有的都加载完后，我们再进行页面的初始化。
或者需要同时使用两个来自不同接口的数据时，就可以使用all方法。

race的用法

all方法的效果实际就是谁跑的慢，那么就以谁为准来执行回调，而race则相反，谁跑的快，就以谁为准来执行回调。 race和all的使用方法都是一样的，我们把上面 runAsync 的延迟改成1S 来看一下：

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

这三个异步操作同样是并行执行的。结果你应该可以猜到，1秒后runAsync1已经执行完了，此时then里面的就执行了。结果是这样的：

在then里面的回调开始执行时，runAsync2()和runAsync3()并没有停止，仍旧再执行。于是再过1秒后，输出了他们结束的标志。

这个race有什么用呢？使用场景还是很多的，比如我们可以用race给某个异步请求设置超时时间，并且在超时后执行相应的操作，代码如下：

//请求某个图片资源
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(results){
    console.log(results);
})
.catch(function(reason){
    console.log(reason);
});

requestImg函数会异步请求一张图片，我把地址写为”xxxxxx”，所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race，于是他俩就会赛跑，如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。运行结果如下：

posted @ 2021-03-10 01:48 小码同学哟~ 阅读(8477) 评论(0) 收藏举报

刷新页面返回顶部

江湖人称码狗！