HTML5 的 JavaScript Promise

1 Promise

(1)Promise是一种抽象异步处理的对象,其核心概念为“确保在一件事做完之后,再做另一件事”。

(2)浏览器支持:

到目前为止:Safari8、 Chrome 34、Firefox30、Opera20以上版本支持该对象。

2 创建Promise对象

var promise = new Promise(function(resolve,reject){
    //做一些事情,可以是异步的,然后。。。
    if(/*一切正常*/){
        resolve("一切正常");
    }else{
        reject(Error("处理失败"));
    }
});

(1)其构造函数中使用一个参数,参数值为一个回调函数。该回调函数又使用两个参数,参数值分别为两个回调函数。

(2)在Promise构造函数的参数值回调函数中可以执行一些处理(可以说异步处理),如果执行结果正常则调用resolve回调函数,否则调用reject回调函数。

(3)在H5中,将执行结果正常称为Promise对象返回肯定结果,将执行失败称为Promise对象返回否定结果。

3 then方法

promise.then(function(result){
    console.log(result);
},function(err){
    console.log(err);
});

(1)该方法采用两个参数,参数值均为回调函数,第一个回调函数用于对Promise构造函数中所指定的参数值回调函数中的处理执行成功的场合,另一个回调函数用于失败的场合。

(2)两个回调函数都是可选的。(即可只指定一个)

//只指定成功时的回调函数
promise.then(function(result){
    console.log(result);
});
//只指定失败时的回调函数
promise.then(undefined,function(err){
    console.log(err);
});

(3)链式调用Promise对象的then方法

可以通过链式调用Promise对象的then方法来一个接一个地运行附加的异步操作。

var promise = new Promise(function(resolve,reject){
        resolve(1);
});
promise.then(function(val){
    console.log(val);//1
    return val+2;
}).then(function(val){
    console.log(val);//3
});

4 将异步操作队列化

通过链式调用Promise对象的then方法来一个接一个地运行附加的异步操作。

(1)当从一个then方法的参数值回调函数进行返回时,如果返回一个值, 下一个then方法将被立即调用,并且使用该返回值作为参数。

(2)如果then方法的参数值回调函数返回一个Promise对象,下一个then方法将 对其进行等待,直到这个Promise对象的参数值回调函数中的处理结果确定(肯定或否定)以后才会被调用。

//依次读取文件
//getData()返回一个Promise对象
getData("1.txt").then(function(){
    return getData("2.txt");
}).then(function(){
    return getData("3.txt");
}).then(function(){
    //执行操作
})

5 异常处理

可以使用catch机制来捕捉Promise构造函数的参数值回调函数中抛出的错误

promise.then(function(result){
    console.log(result);
}).catch(function(err)){
    console.log(err);
});

(1)此catch机制只是then(undefined,func)的简明语法,目的是增加代码的可读性。其等同于

promise.then(function(result){
    console.log(result);
}).then(undefined,function(err)){
    console.log(err);
});

(2)Promise对象返回否定结果之后会跳转到之后第一个配置了否定回调的then方法(或catch方法,两者含义相同)。

(3)Promise对象的否定回调函数可以通过Promise.reject()方法显示调用,但也可以被Promise对象的构造函数的参数值回调函数中抛出的错误隐式调用。(catch机制:错误被自动捕捉并转化为否定结果)

(4)在Promise对象的then方法的参数值回调函数种抛出的错误也是(catch机制)。

6 Promise对象序列

  • Promise类的静态方法-resolve()

该方法最多一个参数

(1)参数值为Promise对象时,resolve方法根据传入的Promise对象复制一个新的Promise对象。

(2)参数值为其他任何值,创建一个以这个值为肯定结果(即传递给Promise构造函数的参数值回调函数中的resolve回调函数的参数)的Promise对象。

(3)不指定参数值,创建一个以“undefined”为肯定结果的Promise对象。

  • Promise类的静态方法-reject()

同上,改为否定结果即可。

Promise.resolve().then(function(){
        return getSequence;
}).then(function(){
    //
}).catch(function(){
   //
});

(创建一个可以返回肯定或否定结果的Promise对象,从而立即调用回调函数)

7 执行并行处理

Promise类的all方法

Promise.all(arrayOfPromises).then(function(arrayOfResults)){
        //返回结果都为肯定结果
});

(1)功能:并行执行多个异步处理。

(2)此方法以一个Promise对象数组作为参数,并创建一个当所有执行结果都已成功时返回肯定结果的Promise对象。

(3)在该对象的then方法中可以得到一个结果数组,该结果数组与传入的Promise对象数组的顺序保持一致。

(4)如果任一Promise对象返回否定结果则调用reject回调函数。

(5)Promise.race()方法

同样以一个Promise对象数组作为参数,但是当数组中任何元素返回肯定结果时,该方法立即返回肯定结果,或则当任何元素返回否定结果时立即返回否定结果(返回第一个肯定或否定结果)。

你可能感兴趣的:(HTML5,HTML5,web前端,Promise,前端)