JavaScript中的Promise詳解

Promise是異步編程的一種解決方案,是一個對象,可以獲取異步操作的消息,大大改善瞭異步編程的困難,避免瞭回調地獄,比傳統的解決方案回調函數和事件更合理和更強大。

從語法上講,Promise是一個對象,它可以獲取異步操作的消息。提供瞭一個統一的API,各種異步操作都可以用同樣的方法進行處理

1、Promise的實例有三個狀態:

(1)Pending(進行中)

(2)Resolved(已完成)

(3)Rejected (已拒絕)

2、Promise的實例有兩個過程

(1)pending > fulfiled :Resolved

(2)pending > rejected :Rejected

註意:一旦從進銷項狀態變為其他狀態就永遠不能更改狀態瞭

Promise的基本用法:

1、創建Promise對象

Promise 對象代表一個異步操作,有三種狀態:pending(進行中)、fulfilled(已成功)、rejected(已失敗)

Promise構造函數接收一個函數作為參數,該函數的兩個參數分別是 resolve 和 reject

2、Promise 方法

Promise有五個常用方法:

(1)then()

then 方法可以接收兩個回調函數作為參數,第一個回調函數是Promise對象的狀態改變為 resoved 是調用,第二個回調函數是 Promise 對象的狀態變為 rejected 時調用。其中第二個參數可以省略。

let promise = new Promise((resolve,reject)=>{
    ajax('first').success(function(res){
        resolve(res);
    })
})
promise.then(res=>{
    return new Promise((resovle,reject)=>{
        ajax('second').success(function(res){
            resolve(res)
        })
    })
}).then(res=>{
    return new Promise((resovle,reject)=>{
        ajax('second').success(function(res){
            resolve(res)
        })
    })
}).then(res=>{
 })

(2)catch()

該方法相當於 then 方法的第二個參數,指向 reject 的回調函數。

另一個作用是,在執行resolve回調函數時,如果出錯,拋出異常,不會停止隕星,而是進入catch 方法中。

p.then((data) => {
     console.log('resolved',data);
},(err) => {
     console.log('rejected',err);
     }
); 
p.then((data) => {
    console.log('resolved',data);
}).catch((err) => {
    console.log('rejected',err);
});

(3)all()

all 方法可以完成並進行任務,它接收的是一個數組,數組的每一項都是 Promise 對象。當數組中所有的 Promise 狀態都達到 resolved 的時候,all 方法的狀態就會變成 resolved,如果有一個狀態變成瞭 rejected。那麼all 方法的狀態就會變成rejected。

javascript
let promise1 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       resolve(1);
	},2000)
});
let promise2 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       resolve(2);
	},1000)
});
let promise3 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       resolve(3);
	},3000)
});
Promise.all([promise1,promise2,promise3]).then(res=>{
    console.log(res);
    //結果為:[1,2,3] 
})

(4)rece()

rece 方法和 all 一樣,接收的參數是一個每項都是 Promise 的數組,但是與 all 不同的是,當最先執行完的事件執行完之後,就直接返回該 promise 對象的值

rece的實際作用:當要做一件事,超過長時間就不做瞭,可以用這個方法來解決。

Promise.race([promise1,timeOutPromise(5000)]).then(res=>{})

(5)finally()

finally 方法用於指定不管 Promise 對象最後狀態如何,都會執行的操作。(該方法是ES2018中引入標準的)

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

finally 方法的回調函數不接受任何參數,這意味著沒有辦法知道前面的 Promise 狀態到底是 fulfilled 還是 rejected

promise
.finally(() => {
  // 語句
});
// 等同於
promise
.then(
  result => {
    // 語句
    return result;
  },
  error => {
    // 語句
    throw error;
  }
);

在上面代碼中,如果不寫 finally 方法,同樣的語句需要為成功和失敗兩種情況各寫一次。有瞭 finally 方法隻需寫一次即可

總結

本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀: