promise 基本用法

Promise 對象是一個構造函數(shù)，用來生成 Promise 實例。Promise 構造函數(shù)接受一個函數(shù)作為參數(shù)，該函數(shù)的兩個參數(shù)分別是 resolve 和 reject。

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

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

const funPromise = function(options) {
 return new Promise(function(resolve, reject) {
  if (/* 異步操作成功 */){
   resolve(result);
  } else {
   reject(error);
  }
 });
}

resolve 函數(shù)的參數(shù)除了正常的值以外，還可能是另一個 Promise 實例，此時，初始 promise 的最終狀態(tài)根據(jù)傳入的新的 Promise 實例決定。

reject 方法的作用，相當于拋出錯誤。等同于 throw new Error('error')。

Promise.prototype.then()

Promise 實例具有 then 方法，它的作用是為 Promise 實例添加狀態(tài)改變時的回調函數(shù)，即 Promise 實例生成以后，用 then 方法分別指定 fulfilled 狀態(tài)和 rejected 狀態(tài)的回調函數(shù)。

funPromise().then(function(result) {
 // fulfilled
}, function(error) {
 // rejected
})

then 方法可以接受兩個回調函數(shù)作為參數(shù)。第一個回調函數(shù)是 Promise 對象的狀態(tài)變?yōu)?fulfilled 時調用，第二個回調函數(shù)是 Promise 對象的狀態(tài)變?yōu)?rejected 時調用。其中，第二個函數(shù)是可選的，不一定要提供。這兩個函數(shù)都接受 Promise 對象傳出的值作為參數(shù)。

then 方法返回的是一個新的 Promise 實例（注意，不是原來那個 Promise 實例）。因此可以采用鏈式寫法，即 then 方法后面再調用另一個 then 方法來處理上一個 then 方法中 return 的結果。

funPromise().then(function(result) {
 return result.data;
}).then(function(data) {
 // fulfilled
});

上面的代碼使用 then 方法，依次指定了兩個回調函數(shù)。第一個回調函數(shù)完成以后，會將返回結果作為參數(shù)，傳入第二個回調函數(shù)。并且，第一個 then 返回的結果也可以是另一個異步操作的 Promise 對象，這時后一個 then 函數(shù)，就會等待該 Promise 對象的狀態(tài)發(fā)生變化，才會被調用。

funPromise().then(
 (result) => { return funPromise(result); }
).then(
 (data) => { /* fulfilled */ },
 (error) => { /* rejected */ }
);

上面代碼中，第一個 then 方法指定的回調函數(shù)，返回的是另一個 Promise 對象。這時，第二個 then 方法指定的回調函數(shù)，就會等待這個新的 Promise 對象狀態(tài)發(fā)生變化。如果變?yōu)?fulfilled，就調用第一個回調函數(shù)，如果狀態(tài)變?yōu)?rejected，就調用第二個回調函數(shù)。

Promise.prototype.catch()

Promise 實例具有 catch 方法，它的作用是為 Promise 實例添加狀態(tài)改變?yōu)?rejected 狀態(tài)的回調函數(shù)，也就是 then 方法的第二個函數(shù)的替代寫法。

funPromise().then(function(result) {
 // fulfilled
}).catch(function(error) {
 // 處理 funPromise 和之前 then 回調函數(shù)運行時發(fā)生的錯誤
});

Promise 對象的錯誤具有“冒泡”性質，會一直向后傳遞，直到被捕獲為止。也就是說，無論前面有多少個 then 函數(shù)，其中的錯誤總是會被下一個 catch 語句捕獲。

funPromise().then(function(result) {
 return funPromise(result);
}).then(function(data) {
 // fulfilled
}).catch(function(error) {
 // 處理前面三個 Promise 產(chǎn)生的錯誤
});

一般來說，不要在 then 方法里面定義 rejected 狀態(tài)的回調函數(shù)（即 then 的第二個參數(shù)），總是使用 catch 方法，因為這種寫法可以捕獲前面 then 方法執(zhí)行中的錯誤。

catch 方法返回的還是一個 Promise 對象，并且 catch 中如果沒有拋出任何其它錯誤，那么該 Promise 對象則是 resolved 狀態(tài)。而且后面還可以接著調用 then 方法，但是前面的 catch 不能捕獲后面的 then 中的錯誤，所以盡量 catch 都寫在最后。

Promise.all()

Promise.all() 方法用于將多個 Promise 實例，包裝成一個新的 Promise 實例。其接受一個數(shù)組作為參數(shù)，數(shù)組中的值都是 Promise 實例，如果不是，就會先調用 Promise.resolve() 方法，將參數(shù)轉為 Promise 實例，再進一步處理。

const p = Promise.all([funPromise(1), funPromise(2), funPromise(3)]);

p 的狀態(tài)由數(shù)組中的值決定，分成兩種情況。

• 數(shù)組中 Primise 實例的狀態(tài)都變成 fulfilled，p 的狀態(tài)才會變成 fulfilled，此時數(shù)組中實例的返回值組成一個數(shù)組，傳遞給 p 的回調函數(shù)。
• 只要數(shù)組的實例之中有一個被 rejected，p 的狀態(tài)就變成 rejected，此時第一個被 reject 的實例的返回值，也就是報錯信息，會傳遞給 p 的回調函數(shù)。

p.then(function (results) {
 // 全部 fulfilled，results 是個數(shù)組，里面是每個實例的返回結果
}).catch(function(error){
 // 其中有一個變?yōu)?rejected
});

注意，如果作為參數(shù)的 Promise 實例，自己定義了 catch 方法，那么它一旦被 rejected，并不會觸發(fā) Promise.all() 的 catch 方法。

應用

用 Promise 對象實現(xiàn) Ajax。

const getAjax = function(url) {
 const promise = new Promise(function(resolve, reject){
  const handler = function() {
   if (this.readyState === 4 && this.status === 200) {
    resolve(this.response);
   } else {
    reject(new Error(this.statusText));
   }
  };
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.onreadystatechange = handler;
  xhr.responseType = "json";
  xhr.setRequestHeader("Accept", "application/json");
  xhr.send();
 });
 return promise;
};

getAjax("/test.json").then(function(json) {
 console.log('Contents: ' + json);
}, function(error) {
 console.error('出錯了', error);
});

async / await 基本用法

當 async 函數(shù)執(zhí)行的時候，一旦遇到 await 就會先等到 await 后的異步操作完成，再接著執(zhí)行函數(shù)體內之后的語句。

async 函數(shù)返回一個 Promise 對象，可以使用 then 方法添加回調函數(shù)。async 函數(shù)內部 return 語句返回的值，會成為 then 方法回調函數(shù)的參數(shù)。

async function f() {
 return 'hello dora';
}

f().then(v => console.log(v))  // "hello dora"

async 函數(shù)內部拋出錯誤，會導致返回的 Promise 對象變?yōu)?rejected 狀態(tài)。拋出的錯誤對象會被 catch 方法回調函數(shù)接收到。

async function f() {
 throw new Error('出錯了');
}

f().catch( e => console.log(e)) // Error: 出錯了

await 命令

正常情況下，await 命令后面是一個 Promise 對象，返回該對象的結果。如果不是 Promise 對象，就直接返回對應的值。

async function f() {
 return await 123;       // 等同于 return 123;
}

f().then(v => console.log(v)) // 123

await 命令后面的 Promise 對象如果變?yōu)?rejected 狀態(tài)，則錯誤會被 catch 方法的回調函數(shù)接收到。

任何一個 await 語句后面的 Promise 對象變?yōu)?rejected 狀態(tài)，那么整個 async 函數(shù)就會中斷執(zhí)行。

有時，我們希望即使前一個異步操作失敗，也不要中斷后面的異步操作，有兩個解決辦法：

第一種方法是可以將 await 放在 try...catch 結構里面，這樣不管這個異步操作是否成功，后面的代碼都會執(zhí)行。

async function f() {
 try {
  await Promise.reject('出錯了');
 } catch(e) { }
 return await Promise.resolve('hello dora');
}

f().then(v => console.log(v))  // hello dora

另一種方法是 await 后面的 Promise 對象再跟一個 catch 方法，處理前面可能出現(xiàn)的錯誤。

async function f() {
 await Promise.reject('出錯了').catch(e => console.log(e));
 return await Promise.resolve('hello dora');
}

f().then(v => console.log(v))
// 出錯了
// hello dora

使用注意點

1. 錯誤處理

前面已經(jīng)說過，await 命令后面的 Promise 對象，運行結果可能是 rejected，所以防止出錯的方法，就是最好把 await 命令放在 try...catch 代碼塊中。如果有多個 await 命令，可以統(tǒng)一放在 try...catch 結構中，如果只有一個 await，可以使用上例中的 catch 捕獲 await 后面的 promise 拋出的錯誤。

const superagent = require('superagent');
const NUM_RETRIES = 3;

async function test() {
 let i;
 for (i = 0; i < NUM_RETRIES; i++) {
  try {
   await superagent.get('/api/xxx');
   break;
  } catch(err) {}
 }
}

test();

上面代碼中，使用 try...catch 結構，實現(xiàn)多次重復嘗試。如果 await 操作成功，就會使用 break 語句退出循環(huán)；如果失敗，會被 catch 語句捕捉，然后進入下一輪循環(huán)。

2. 多個 await 異步操作并發(fā)執(zhí)行

多個 await 命令后面的異步操作，如果不存在繼發(fā)關系（即互不依賴），最好讓它們同時觸發(fā)，以縮短程序的執(zhí)行時間。

// 寫法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);

// 寫法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

3. forEach 等數(shù)組遍歷方法的參數(shù)為 async 函數(shù)時是并發(fā)執(zhí)行的

只有 async 函數(shù)內部是繼發(fā)執(zhí)行，外部不受影響，因此 forEach()、map() 等數(shù)組遍歷方法的參數(shù)改成 async 時是并發(fā)執(zhí)行的。

function dbFuc() { //這里不需要 async
 let docs = [{}, {}, {}];

 // 會得到錯誤結果
 docs.forEach(async (doc)=> {
  await funPromise(doc);
 });
}

上面代碼會得到錯誤結果，原因是這時三個 funPromise(doc) 操作是并發(fā)執(zhí)行的，也就是同時執(zhí)行，而不是繼發(fā)執(zhí)行。因此正確的寫法是采用 for 循環(huán)。

async function dbFuc() {
 let docs = [{}, {}, {}];

 for (let doc of docs) {
  await funPromise(doc);
 }
}

如果需要并發(fā)執(zhí)行，可使用 Promise.all() 方法。

async function dbFuc() {
 let docs = [{}, {}, {}];
 let promises = docs.map((doc) => funPromise(doc));

 let results = await Promise.all(promises);
 return results;
}

有一組異步操作，需要按照順序完成。

async function logInOrder(urls) {
 // 并發(fā)讀取遠程URL
 const textPromises = urls.map(async url => {
  const response = await fetch(url);
  return response.text();
 });

 // 按次序輸出
 for (const textPromise of textPromises) {
  console.log(await textPromise);
 }
}

上面代碼中，雖然 map 方法的參數(shù)是 async 函數(shù)，但它是并發(fā)執(zhí)行的，因為只有 async 函數(shù)內部是繼發(fā)執(zhí)行，外部不受影響。后面的 for..of 循環(huán)內部使用了 await，因此實現(xiàn)了按順序輸出。

參考鏈接：
Promise 對象
async 函數(shù)

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論