React之關于Promise的用法

更新時間：2023年02月13日 09:12:05 作者：追夢菜鳥

這篇文章主要介紹了React之關于Promise的用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

1.Promise是什么？

從用途上來說：

(1)promise主要用于異步計算。

(2)可以將異步操作隊列化，按照期望的順序執(zhí)行，返回符合預期的結果。

(3)可以在對象之間傳遞和操作promise，幫助我們處理隊列。

從語法上說：

(1)Promise 是一個對象，從它可以獲取異步操作的消息。

(2)Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進行處理

2.Promise對象的特點？

對象的狀態(tài)不受外界影響。

Promise對象代表一個異步操作，有三種狀態(tài)：

pending（進行中）
fulfilled（已成功）
rejected（已失?。?/li>

只有異步操作的結果，可以決定當前是哪一種狀態(tài)，任何其他操作都無法改變這個狀態(tài)。

一旦狀態(tài)改變，就不會再變，任何時候都可以得到這個結果。

Promise對象的狀態(tài)變化只有如下2種：

pending->fulfilled
pending->rejected

只要這兩種情況發(fā)生，狀態(tài)就凝固，不會再變，會一直保持這個結果。

說明：如果改變已經發(fā)生了，你再對Promise對象添加回調函數，也會立即得到這個結果。這與事件（Event）完全不同，事件的特點是，如果你錯過了它，再去監(jiān)聽，是得不到結果的。

3.Promise的缺點？

無法取消Promise，一旦新建它就會立即執(zhí)行，無法中途取消。如果不設置回調函數，Promise內部拋出的錯誤，不會反應到外部。當處于pending狀態(tài)時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）

4.Promise的基本用法？

ES6 規(guī)定，Promise對象是一個構造函數，用來生成Promise實例。

const promise = new Promise(function(resolve, reject) { 
  // ... some code

  if (/* 異步操作成功 */){
    resolve(value);                // 異步操作成功時調用，并將異步操作的結果作為參數傳遞出去
  } else {
    reject(error);                 // 異步操作失敗時調用，并將異步操作的結果作為參數傳遞出去

  }
});

對promise對象穿出的值進行處理
promise.then(function(value) {     // 這兩個函數都接受Promise對象傳出的值作為參數。
  // success                       // 成功時，調用第一個函數
}, function(error) {
  // failure                       // 失敗時，調用第二個函數
});

或者

promise.then(function(value) {    
  // success                       // 成功時，調用第一個函數
}).catch(function(error) {
  // failure                       // 失敗時，調用第二個函數
});

說明：
(1) promise構造函數，接受一個函數作為參數。
(2) 這個函數又有兩個參數，接受 resolve 和 reject 這兩個參數。
(3) resolve 和 reject 也是函數

resolve 函數的作用：
將Promise對象的狀態(tài)從pending 變?yōu)?resolved，
在異步操作成功時調用，并將異步操作的結果，作為參數傳遞出去。!!!

reject 函數的作用：
將Promise對象的狀態(tài)從“從 pending 變?yōu)?rejected，
在異步操作失敗時調用，并將異步操作報出的錯誤，作為參數傳遞出去。!!!

5.Promise 新建后就會立即執(zhí)行?

componentDidMount() {
    let p = new Promise((resolve,reject) => {
      console.log('1')
      resolve();
    })
    p.then(result => {
      console.log('2')
    })
    console.log('3')
 }

 // 執(zhí)行結果：
 // 1
 // 3
 // 2

說明：
上面代碼中，Promise 新建后立即執(zhí)行，所以首先輸出的是 1 。
然后，then方法指定的回調函數，將在當前腳本所有同步任務執(zhí)行完才會執(zhí)行，所以 2 最后輸出。

例子code

  componentDidMount() {
        new Promise(function (resolve, reject) {
            console.log('start new Promise...');
            var timeOut = Math.random() * 2;
            console.log('set timeout to: ' + timeOut + ' seconds.');
            setTimeout(function () {
                if (timeOut < 1) {
                    console.log('call resolve()...');
                    resolve('200 OK');
                }
                else {
                    console.log('call reject()...');
                    reject('timeout in ' + timeOut + ' seconds.');
                }
            }, timeOut * 1000);
        }).then(function (result) {    //這里的參數result就是resolve方法通過參數傳出的內容
            console.log('Done: ' + result);
        },function (result) {   //這里的參數result就是reject方法通過參數傳出的內容
            console.log('Failed: ' + result);
        });
    }

運行結果：

6.鏈式任務

Promise還可以做更多的事情，比如，有若干個異步任務，需要先做任務1，如果成功后再做任務2，任何任務失敗則不再繼續(xù)并執(zhí)行錯誤處理函數。

要串行執(zhí)行這樣的異步任務，不用Promise需要寫一層一層的嵌套代碼。有了Promise，我們只需要簡單地寫：

job1.then(job2).then(job3).catch(handleError);

例子code

componentDidMount() {
        // 0.5秒后返回input*input的計算結果:
        function multiply(input) {
            return new Promise(function (resolve, reject) {
                console.log('calculating ' + input + ' x ' + input + '...');
                setTimeout(resolve, 500, input * input);
            });
        }

        // 0.5秒后返回input+input的計算結果:
        function add(input) {
            return new Promise(function (resolve, reject) {
                console.log('calculating ' + input + ' + ' + input + '...');
                setTimeout(resolve, 500, input + input);
            });
        }

        var p = new Promise(function (resolve, reject) {
            console.log('start new Promise...');
            resolve(123);
        });

        p.then(multiply)
            .then(add)
            .then(multiply)
            .then(add)
            .then(function (result) {
                console.log('Got value: ' + result);
            });
    }

運行結果：