Promise对象解析

Promise对象用于表示一个异步操作的最终状态(完成或失败)以及其返回的值。

一个例子

假设我们现在用Js异步请求一个文件并在请求文件后对文件数据进行处理

请求数据和处理数据函数

function ajaxFile(callback){
    // 模拟数据请求
    setTimeout(function(){
        console.log("数据请求...");
        var data = 1;
        callback(data); // 调用回调
    },1000);
}
function dealFile(data){
    console.log("数据请求完成!");
    console.log("数据:"+data);
}

采用回调函数

ajaxFile(dealFile)

结果:

数据请求...
数据请求完成!
数据:1

采用Promise

new Promise(function(resolve, reject){
    ajaxFile(resolve);
}).then(function(data){
    dealFile(data);
})

结果:

数据请求...
数据请求完成!
数据:1

可以看出使用Promise可以获得与使用回调的同等效果,但通过Promise可以将请求数据和处理数据的过程解耦。异步操作的过程和异步操作的后续过程能保持依赖关系,同时又不过分依赖。

Promise对象使用

Promise对象的三个状态

  • pending : 初始状态,既不是成功,也不是失败
  • fulfilled : 操作成功完成
  • rejected : 操作失败

获得Promise对象

  • 使用构造函数

    new Promise(function(resolve, reject){...}/* executor */)

    executor是带有两个参数的函数, Promise构造函数执行时立即调用该函数。executor内部通常会执行一些异步操作,一旦完成可以调用resolve函数将promise状态改为fulfilled,或者在发生错误时将它的状态改为rejected

  • 使用Promise.resolve(value)

    • value为一个Promise对象

    直接返回该对象

    • value为带then方法的对象

    返回一个then方法执行后的Promise对象

    • value为空、基本类型或者不带then方法的对象

    返回一个状态为fulfilled的Promise对象,并将value传递给对应的then方法

  • 使用Promise.reject(reason)

    返回一个状态为rejected的Promise对象,并传入给定的失败信息

  • 使用Promise.race(iterable)

    返回一个新的Promise对象,在iterable参数对象里所有Promise对象都成功的时候才返回成功,并将所有Promise的返回值作为数组返回。否则将返回第一个触发失败的Promise对象的错误信息

  • 使用Promise.all(iterable)

Promise对象的then方法

Promise对象可以通过then方法设置状态成功或者失败后继续执行的代码

promise.then(function(value){
    // 状态为fulfillend
},function(){
    // 状态为rejected
})

例如:

new Promise(function(resolve, reject){
    resolve(1);
    //reject(-1);
})
.then(function(data){
    console.log("成功:"+data);
}, function(data){
    console.log("失败:"+data);  
})

返回值处理:

  • 若then中回调函数返回一个值,那么then返回的Promise将作为fulfilled状态,并将返回值作为成功状态的回调函数的参数
  • 若then中回调函数抛出一个错误,那么then返回的Promise将作为rejected状态,并将抛出的错误作为失败状态的回调函数的参数
  • 若then中回调函数返回一个Promise,那么then将返回一个与回调函数返回的Promise状态一致的Promise,且返回参数与回调函数中返回参数一致。

Promise的reject方法

Promise对象可以通过reject方法设置状态失败后继续执行的代码

promise.catch(function(reason) {
   // 失败
});

Promise的finally方法

Promise对象可以通过finally方法设置无论状态成功或者失败都将执行的代码

promise.finally(function() {
   // 成功或失败
});

MDN上关于Promise的解析

猜你喜欢

转载自blog.csdn.net/qimingweikun/article/details/80514563