Promise入門必知

這次帶給大家Promise入門必知，Promise入門必知的注意事項有哪些，下面就是實戰案例，一起來看一下。

Promise是非同步程式設計的解決方案，從語法上來說，Promise是一個對象，從它可以取得非同步操作的訊息。

Promise的基本用法

Promise建構子接受一個函數作為參數，該函數的兩個參數分別是resolve和reject。它們是兩個函數，由JavaScript引擎提供。

• resolve函數的作用是，將Promise物件的狀態從「未完成」變成「成功」（即從Pending變成Resolved），在非同步操作成功時呼叫，並將非同步操作的結果作為參數傳遞出去。

• reject函數的作用是，將Promise物件的狀態從「未完成」變成「失敗」（即從Pending變成Rejected），在非同步操作失敗時呼叫，並將非同步操作報出的錯誤作為參數傳遞出去。

• then方法可以接受兩個回呼函數作為參數。 第一個回呼函數是Promise物件的狀態變成Resolved時調用，第二個回呼函數是Promise物件的狀態變成 Reject時調用。

var promise = new Promise(    //异步执行，Promise对象创建后会被立即执行
    function (resolve,reject) {        //耗时很长的异步操作　　if('异步处理成功') {　　
        resolve();    //数据处理成功时调用　　} else {
        reject();    //数据处理失败时调用    }
        
    }
)//Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。promise.then(    function A() {        //数据处理成功后执行    },    function B() {        //数据处理失败后执行    }
)

下面我們舉一個簡單的例子來模擬非同步操作成功和非同步操作失敗函數的運行過程。

console.log('starting' promise =  Promise("2秒后，我运行了"'异步操作成功了');     
        
    }, 2000'异步操作成功后执行我:''异步操作失败后执行我:''我也运行了'

知代码3处的return 'hello' 语句在新建的new Promise对象中并没有被当作参数返回给then()函数内.那么会不会返回给promise了呢？我们用一段代码来测试一下

console.log('starting');var promise = new Promise(function(resolve, reject) {  
    setTimeout(function() { 
        console.log("2秒后，我运行了");
        resolve('异步操作成功了');     //1
        //reject('异步操作失败了');    //2
        return 'hello';
    }, 2000) 
    
})
promise.then(function (value) { 
    console.log('异步操作成功后执行我:',value);
},function (value) {
    console.log('异步操作失败后执行我:',value);
}
)
console.log('我也运行了');
console.log(promise);
setTimeout(function () {
    console.log('5秒后，我执行了');
    console.log(promise);
},5000);//starting//我也运行了//Promise { pending }　　//[[PromiseStatus]]:"pending"　　//[[PromiseValue]]:undefined　　//proto:Promise {constructor: , then: , catch: , …}//2秒后，我运行了//异步操作成功后执行我: 异步操作成功了//5秒后，我执行了//Promise { resolved }　　//[[PromiseStatus]]:"resolved"　　//[[PromiseValue]]:"异步操作成功了"　　//proto:Promise {constructor: , then: , catch: , …}

由執行結果可知，變數promise仍然是new Promise物件的一個實例。所以return語句雖然被執行了，但對promise實例不會產生任何影響，相當於不存在。

由上面測試的程式碼可知，Promise物件有以下兩個特點。
　　（1）物件的狀態不受外界影響。 Promise物件代表一個非同步操作，有三種狀態：Pending（進行中）、Resolved（已完成，又稱為Fulfilled） 和Rejected（已失敗）。 只有非同步操作的結果，可以決定目前是哪一種狀態，

　　（2）一旦狀態改變，就不會再變，任何時候都可以得到這個結果。 Promise物件的狀態改變，只有兩種可能：從Pending變成Resolved和從Pending變 為Rejected。只要這兩種情況發生，狀態就凝固了，不會再變了，會一直維持這個結果。就算改變已經發生了，你再對Promise物件加入回呼函數，也會立即得到這個結果。這與事件（Event）完全不同，事件的特徵是，如果你錯過了它，再去監聽，是得不到結果的。

resolve(value) VS resolve(Promise)

我們會在非同步操作成功時呼叫resolve函數，其作用是將Promise物件的狀態從Pending變成Resolved，並將非同步操作的結果作為參數傳遞給then()方法裡的第一個函數的形參。

那麼傳入的參數是值和傳入的參數是promise物件時有什麼不同呢。我們來看一下例子。

當傳入的參數為值時：

var time = new Date();var promise = new Promise(function(resolve, reject) {  
    setTimeout(function() { 
        console.log("1秒后，我运行了");
        resolve('异步操作成功了');     //1
    }, 2000) 
    
}).then(function (value) {
    console.log(value,new Date() - time);
})//执行的输出结果为：//2秒后，我运行了//异步操作成功了 1002

大約過了一秒左右，我們可以看到在resolved狀態的回呼方法中，我們印出了上面註解中的內容。我們能夠透過resolve方法傳遞操作的結果，然後在回調方法中使用這些結果。

如果我們在resolve中傳入一個Promise實例呢？

 time =  promise =  Promise("2秒后，我运行了"'异步操作成功了');     2000 promise2 =  Promise(1000 Date() -

promise2經過了2秒鐘後才印出來結果。奇怪了，我們不是設定promise2經過1秒後執行嗎？

簡單說就是因為promise2中的resolve()函數傳入了promise對象，此時promise物件的狀態決定了promise的狀態，同時會把返回值傳給promise。

Promise/A+中規定 [[Resolve]](promise, x)

2.3.2.如果x是promise實例，則以x的狀態作為promise的狀態

　 2.3.2.1.如果x的狀態為pending，則promise的狀態也為pending， 直到x的狀態變化而改變。

　 2.3.2.2.若x的狀態為fulfilled， promise的狀態也為fulfilled，且以x的不可變值作為promise的不可變值。

　 2.3.2.3.如果x的状态为rejected， promise的状态也为rejected， 并且以x的不可变原因作为promise的不可变原因。

2.3.4.如果x不是对象或函数，则将promise状态转换为fulfilled并且以x作为promise的不可变值。

 Promise.prototype.then()

Promise实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的。它的作用是为Promise实例添加状态改变时的回调函数。 前面说过，then方法的第一个参数是Resolved状态的回调函数，第二个参数（可选）是Rejected状态的回调函数。

then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。

var promise = new Promise(function(resolve, reject) {  
    setTimeout(function() { 
        console.log("2秒后，我运行了");
        resolve('异步操作成功了');     //1
    }, 2000) 
    
})
promise.name = 'promise';
console.log('promise:',promise)var promise2 = promise.then(function (value) {
    console.log(value);
})
promise2.name = 'promise2';
console.log('promise2:',promise2);// promise://     Promise { pending }//     [[PromiseStatus]]:"pending"//     [[PromiseValue]]:undefined//     name:"promise"//     proto:Promise {constructor: , then: , catch: , …}// promise2:// Promise { pending }//     [[PromiseStatus]]:"pending"//     [[PromiseValue]]:undefined//     name:"promise2"//     proto:Promise {constructor: , then: , catch: , …}

我们可以知道promise.then()方法执行后返回的是一个新的Promise对象。也就是说上面代码中的promise2是一个Promise对象,它的实现效果和下面的代码是一样的，只不过在then()方法里，JS引擎已经自动帮我们做了。

promise2 = new Promise(function (resolve,reject) {})

既然在then()函数里已经自动帮我实现了一个promise对象，但是我要怎么才能给resolve()或reject()函数传参呢？其实在then()函数里，我们可以用return()的方式来给promise2的resolve()或reject()传参。看一个例子。

 promise =  Promise("2秒后，我运行了"'异步操作成功了');     
        
    }, 2000 promise2 = promise.then(
     (1 promise3 = promise2.then('is:''error:'= 'promise2'3000

Promise与错误状态处理

.then(null, rejection)，用于指定异步操作发生错误时执行的回调函数。下面我们做一个示例。

var promise = new Promise(function(resolve, reject) {
    setTimeout(function () {
            reject('error');
    },2000);
}).then(null,function(error) {
    console.log('rejected', error)
});//rejected error

我们知道then()方法执行后返回的也是一个promise对象，因此也可以调用then()方法，但这样的话为了捕获异常信息，我们就需要为每一个then()方法绑定一个.then(null, rejection)。由于Promise对象的错误信息具有“冒泡”性质，错误会一直向后传递，直到被捕获为止。因此Promise为我们提供了一个原型上的函数Promise.prototype.catch()来让我们更方便的 捕获到异常。

我们看一个例子

var promise = new Promise(function(resolve, reject) {
    setTimeout(function () {
            reject('error');
    },2000);
}).then(function(value) {
    console.log('resolve', value);
}).catch(function (error) {
    console.log(error);
})//运行结果//error

上面代码中，一共有二个Promise对象：一个由promise产生，一个由then产生。它们之中任何一个抛出的错误，都会被最后一个catch捕获。

但是如果用.then(null, rejection)方法来处理错误信息，我们需要在每一个rejection()方法中返回上一次异常信息的状态，这样当调用的then()方法一多的时候，对会对代码的清晰性和逻辑性造成影响。

所以，一般来说，不要在then方法里面定义Reject状态的回调函数（即then的第二个参数），总是使用catch方法。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

在前端中的html基础知识 

知名的网站前端布局分析
关于前端的css基本知识

以上是Promise入門必知的詳細內容。更多資訊請關注PHP中文網其他相關文章！