promise 基本用法

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

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

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

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

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

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

Promise.prototype.then()

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

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

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

then 方法返回的是一個(gè)新的 Promise 實(shí)例（注意，不是原來那個(gè) Promise 實(shí)例）。因此可以采用鏈?zhǔn)綄懛ǎ?then 方法后面再調(diào)用另一個(gè) then 方法來處理上一個(gè) then 方法中 return 的結(jié)果。

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

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

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

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

Promise.prototype.catch()

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

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

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

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

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

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

Promise.all()

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

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

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

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

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

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

應(yīng)用

用 Promise 對象實(shí)現(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 基本用法

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

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

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

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

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

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

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

await 命令

正常情況下，await 命令后面是一個(gè) Promise 對象，返回該對象的結(jié)果。如果不是 Promise 對象，就直接返回對應(yīng)的值。

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

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

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

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

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

第一種方法是可以將 await 放在 try...catch 結(jié)構(gòu)里面，這樣不管這個(gè)異步操作是否成功，后面的代碼都會執(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 對象再跟一個(gè) 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

使用注意點(diǎn)

1. 錯誤處理

前面已經(jīng)說過，await 命令后面的 Promise 對象，運(yùn)行結(jié)果可能是 rejected，所以防止出錯的方法，就是最好把 await 命令放在 try...catch 代碼塊中。如果有多個(gè) await 命令，可以統(tǒng)一放在 try...catch 結(jié)構(gòu)中，如果只有一個(gè) 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 結(jié)構(gòu)，實(shí)現(xiàn)多次重復(fù)嘗試。如果 await 操作成功，就會使用 break 語句退出循環(huán)；如果失敗，會被 catch 語句捕捉，然后進(jìn)入下一輪循環(huán)。

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

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

// 寫法一
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ù)時(shí)是并發(fā)執(zhí)行的

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

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

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

上面代碼會得到錯誤結(jié)果，原因是這時(shí)三個(gè) funPromise(doc) 操作是并發(fā)執(zhí)行的，也就是同時(shí)執(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ā)讀取遠(yuǎn)程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í)行的，因?yàn)橹挥?async 函數(shù)內(nèi)部是繼發(fā)執(zhí)行，外部不受影響。后面的 for..of 循環(huán)內(nèi)部使用了 await，因此實(shí)現(xiàn)了按順序輸出。

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。