回調地獄
readFile("example.txt", function(err, contents) {
if (err) {
throw err;
}
writeFile("example.txt", function(err) {
if (err) {
throw err;
}
console.log("File was written!");
});
});
method1(function(err, result) {
if (err) {
throw err;
}
method2(function(err, result) {
if (err) {
throw err;
}
method3(function(err, result) {
if (err) {
throw err;
}
method4(function(err, result) {
if (err) {
throw err;
}
method5(result);
});
});
});
});
回調地獄嵌套多個方法調用會創建錯綜復雜的代碼，會難以理解與調試。當想要實現更復雜的功能時，回調函數也會存在問題。
Promise 定義
Promise 是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。它由社區最早提出和實現，ES6 將其寫進了語言標準，統一了用法，原生提供了 Promise 對象。
所謂Promise，簡單說就是一個容器，里面保存著某個未來才會結束的事件（通常是一個異步操作）的結果。從語法上說，Promise 是一個對象，從它可以獲取異步操作的消息。Promise 提供統一的 API，各種異步操作都可以用同樣的方法進行處理。
Promise 特點
對象的狀態不受外界影響。Promise 對象代表一個異步操作，有三種狀態：pending（進行中）、fulfilled（已成功）和 rejected（已失?。?。只有異步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態。
一旦狀態改變，就不會再變，任何時候都可以得到這個結果。Promise對象的狀態改變，只有兩種可能：從 pending 變為 fulfilled 和從 pending 變為 rejected。只要這兩種情況發生，狀態就凝固了，不會再變了，會一直保持這個結果。如果改變已經發生了，你再對 Promise 對象添加回調函數，也會立即得到這個結果。這與事件（Event）完全不同，事件的特點是，如果你錯過了它，再去監聽，是得不到結果的。
有了Promise對象，就可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數。此外，Promise對象提供統一的接口，使得控制異步操作更加容易。
基本用法
Promise 對象是一個構造函數，用來生成 Promise 實例。
const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 異步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
Promise構造函數接受一個函數作為參數，該函數的兩個參數分別是 resolve 和 reject。它們是兩個函數，由 JavaScript 引擎提供，不用自己部署。
- resolve 函數的作用是，將 Promise 對象的狀態從未完成變為成功（即從 pending 變為 resolved），在異步操作成功時調用，并將異步操作的結果，作為參數傳遞出去。
- reject 函數的作用是，將 Promise 對象的狀態從未完成變為失?。磸?pending 變為 rejected），在異步操作失敗時調用，并將異步操作報出的錯誤，作為參數傳遞出去。
Promise 實例生成以后，可以用 then 方法分別指定 resolved 狀態和 rejected 狀態的回調函數。
promise.then(function(value) {
// success
}, function(error) {
// failure
});
then 方法可以接受兩個回調函數作為參數。第一個回調函數是 Promise 對象的狀態變為 resolved 時調用，第二個回調函數是 Promise 對象的狀態變為 rejected 時調用。其中，第二個函數是可選的，不一定要提供。這兩個函數都接受 Promise 對象傳出的值作為參數。
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve('done'), ms);
});
}
timeout(100).then((value) => {
console.log(value);
});
如果調用 resolve 函數和 reject 函數時帶有參數，那么它們的參數會被傳遞給回調函數。 reject 函數的參數通常是 Error 對象的實例，表示拋出的錯誤；resolve 函數的參數除了正常的值以外，還可能是另一個 Promise 實例。
const p1 = new Promise(function (resolve, reject) {
setTimeout(() => reject(new Error('fail')), 3000)
})
const p2 = new Promise(function (resolve, reject) {
setTimeout(() => resolve(p1), 1000)
})
p2.then(result => console.log(result)).catch(error => console.log(error))
// Error: fail
p1 是一個 Promise，3 秒之后變為 rejected。p2 的狀態在 1 秒之后改變，resolve 方法返回的是 p1。由于 p2 返回的是另一個 Promise，導致 p2 自己的狀態無效了，由 p1 的狀態決定 p2 的狀態。所以，后面的 then 語句都變成針對后者 p1。又過了 2 秒，p1 變為rejected，導致觸發 catch 方法指定的回調函數。
注意，調用 resolve 或 reject 并不會終結 Promise 的參數函數的執行。
new Promise((resolve, reject) => {
resolve(1);
console.log(2);
}).then(r => {
console.log(r);
});
// 2
// 1
調用 resolve(1) 以后，后面的 console.log(2) 還是會執行，并且會首先打印出來。這是因為立即 resolved 的 Promise 是在本輪事件循環的末尾執行，總是晚于本輪循環的同步任務。
一般來說，調用 resolve 或 reject 以后，Promise 的使命就完成了，后繼操作應該放到 then 方法里面，而不應該直接寫在 resolve 或 reject 的后面。所以，最好在它們前面加上return語句，這樣就不會有意外。
new Promise((resolve, reject) => {
return resolve(1);
// 后面的語句不會執行
console.log(2);
})
finally()
finally 方法用于指定不管 Promise 對象最后狀態如何，都會執行的操作。該方法是 ES2018 引入標準的。
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});
不管 promise 最后的狀態，在執行完 then 或 catch 指定的回調函數以后，都會執行 finally 方法指定的回調函數。
已決的 Promise
const p = Promise.resolve('foo')
// 等價于
const p = new Promise(resolve => resolve('foo'))
const p = Promise.reject('出錯了');
// 等價于
const p = new Promise((resolve, reject) => reject('出錯了'))
返回一個狀態已經決定的 Promise 實例。
執行器錯誤
如果在執行器內部拋出了錯誤，那么 Promise 的拒絕處理函數就會被調用。
let promise = new Promise(function(resolve, reject) {
throw new Error("Explosion!");
});
promise.catch(function(error) {
console.log(error.message); // "Explosion!"
});
串聯
let p1 = new Promise(function(resolve, reject) {
resolve(42);
});
p1.then(function(value) {
console.log(value);
}).then(function() {
console.log("Finished");
});
串聯版本的代碼中對 p1.then() 的調用返回了第二個 Promise ，又在這之上調用了 then() 。僅當第一個 Promise 已被決議后，第二個 then() 的完成處理函數才會被調用。
響應多個 Promise
- Promise.all() 方法
接收單個可迭代對象(如數組)作為參數，并返回一個 Promise 。這個可迭代對象的元素都是 Promise ，只有在它們都完成后，所返回的 Promise 才會被完成。
let p1 = new Promise(function(resolve, reject) {
resolve(42);
});
let p2 = new Promise(function(resolve, reject) {
resolve(43);
});
let p3 = new Promise(function(resolve, reject) {
resolve(44);
});
let p4 = Promise.all([p1, p2, p3]);
p4.then(function(value) {
console.log(Array.isArray(value)); // true
console.log(value[0]); // 42
console.log(value[1]); // 43
console.log(value[2]); // 44
});
- Promise.race() 方法
接受一個包含需監視的 Promise 的可迭代對象，并返回一個新的 Promise ，但一旦來源 Promise 中有一個被解決，所返回的 Promise 就會立刻被解決。與等待所有 Promise 完成的 Promise.all() 方法不同，在來源 Promise 中任意一個被完成時， Promise.race() 方法所返回的 Promise 就能作出響應。
let p1 = Promise.resolve(42);
let p2 = new Promise(function(resolve, reject) {
resolve(43);
});
let p3 = new Promise(function(resolve, reject) {
resolve(44);
});
let p4 = Promise.race([p1, p2, p3]);
p4.then(function(value) {
console.log(value); // 42
});
Promise 缺點
- 無法取消Promise，一旦新建它就會立即執行，無法中途取消。
- 如果不設置回調函數，Promise內部拋出的錯誤，不會反應到外部。
- 當處于pending 狀態時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）。
async
- async 表示函數里有異步操作，await表示緊跟在后面的表達式需要等待結果。
- async 函數返回一個 Promise 對象。
- async 函數內部 return 語句返回的值，會成為 then 方法回調函數的參數。
async function f() {
return 'hello world';
}
f().then(v => console.log(v))
// "hello world"
上面代碼中，函數 f 內部 return 命令返回的值，會被 then 方法回調函數接收到。
- async 函數內部拋出錯誤，會導致返回的 Promise 對象變為 reject 狀態。拋出的錯誤對象會被 catch 方法回調函數接收到。
async function f() {
throw new Error('出錯了');
}
f().catch(
e => console.log(e)
)
// Error: 出錯了
- async 函數返回的 Promise 對象，必須等到內部所有 await 命令后面的 Promise 對象執行完，才會發生狀態改變，除非遇到 return 語句或者拋出錯誤。也就是說，只有async函數內部的異步操作執行完，才會執行then方法指定的回調函數。
async function asyncTest() {
let getUrl = await fetch();
console.log(getUrl);
let downloadUrl = await download();
console.log(downloadUrl);
return 'complete';
}
asyncTest().then(console.log)
function fetch() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('fetchDone');
}, 1000);
});
}
function download() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('downloadDone');
}, 2000);
});
}
上面代碼中，模擬了一個抓取和一個下載，只有這兩個操作全部完成，才會執行 then 方法里面的 console.log。
await
- 正常情況下，await 命令后面是一個 Promise 對象。如果不是，會被轉成一個立即 resolve 的 Promise 對象。
async function f() {
return await 123;
}
f().then(v => console.log(v))
// 123
await 命令的參數是數值123，它被轉成 Promise 對象，并立即 resolve。
- await 命令后面的 Promise 對象如果變為 reject 狀態，則 reject 的參數會被 catch 方法的回調函數接收到。
async function f() {
await Promise.reject('出錯了');
}
f().then(v => console.log(v)).catch(e => console.log(e))
// 出錯了
注意，上面代碼中，await 語句前面沒有 return，但是 reject 方法的參數依然傳入了 catch 方法的回調函數。這里如果在 await 前面加上 return，效果是一樣的。
- 只要一個 await 語句后面的 Promise 變為 reject，那么整個 async 函數都會中斷執行。
async function f() {
await Promise.reject('出錯了');
await Promise.resolve('hello world'); // 不會執行
}
- 有時，我們希望即使前一個異步操作失敗，也不要中斷后面的異步操作。這時可以將第一個 await 放在 try...catch 結構里面，這樣不管這個異步操作是否成功，第二個 await 都會執行。
async function f() {
try {
await Promise.reject('出錯了');
} catch(e) {
}
return await Promise.resolve('hello world');
}
f().then(v => console.log(v))
// hello world
另一種方法是 await 后面的 Promise 對象再跟一個 catch 方法，處理前面可能出現的錯誤。
async function f() {
await Promise.reject('出錯了')
.catch(e => console.log(e));
return await Promise.resolve('hello world');
}
f().then(v => console.log(v))
// 出錯了
// hello world
注意點
- await 命令后面的 Promise 對象，運行結果可能是 rejected，所以最好把 await 命令放在 try...catch 代碼塊中。
async function myFunction() {
try {
await somethingThatReturnsAPromise();
} catch (err) {
console.log(err);
}
}
// 另一種寫法
async function myFunction() {
await somethingThatReturnsAPromise()
.catch(function (err) {
console.log(err);
});
}
- 多個await命令后面的異步操作，如果不存在繼發關系，最好讓它們同時觸發。
// 寫法一
async function test() {
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
}
function getFoo() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
console.log('getFoo');
resolve()
}, 2000);
})
}
function getBar() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
console.log('getBar');
resolve()
}, 2000);
})
}
test()
// 寫法二
async function test() {
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;
}
- await 命令只能用在 async 函數之中，如果用在普通函數，就會報錯。
async function test() {
let promises = [function1, function2, function3]
promises.forEach(function (fun) {
const t = await fun();
console.log(t)
});
}
function function1() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('function1')
}, 2000)
})
}
function function2() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('function2')
}, 2000)
})
}
function function3() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('function3')
}, 2000)
})
}
test()
- 如果將 forEach 方法的參數改成 async 函數，也有問題。
promises.forEach(async function (fun) {
const t = await fun();
console.log(t)
});
上面代碼可能不會正常工作，原因是這時三個異步操作將是并發執行，也就是同時執行，而不是繼發執行。正確的寫法是采用 for 循環。
for (let i of promises) {
const t = await i()
console.log(t)
}
- 如果確實希望多個請求并發執行，可以使用 Promise.all 方法。當三個請求都 resolved 時，下面兩種寫法效果相同。
async function dbFuc(db) {
async function test() {
let promises = [function1(), function2(), function3()]
let results = await Promise.all(promises);
console.log(results)
}
