7 個 Js async-await 高級用法
7 個 Js async/await 高級用法
JavaScript 的異步編程已經從回調 (Callback) 演進到Promise
,再到如今廣泛使用的async
/await
語法。後者不僅讓異步代碼更加簡潔,而且更貼近同步代碼的邏輯與結構,大大增強了代碼的可讀性與可維護性。在掌握了基礎用法之後,下面將介紹一些高級用法,以便充分利用async
/await
實現更復雜的異步流程控制。
async/await
與高階函數
當需要對數組中的元素執行異步操作時,可結合async/await
與數組的高階函數(如map
、filter
等)。
// 異步過濾函數
async function asyncFilter(array, predicate) {
const results = await Promise.all(array.map(predicate));
return array.filter((_value, index) => results[index]);
}
// 示例
async function isOddNumber(n) {
await delay(100); // 模擬異步操作
return n % 2 !== 0;
}
async function filterOddNumbers(numbers) {
return asyncFilter(numbers, isOddNumber);
}
filterOddNumbers([1, 2, 3, 4, 5]).then(console.log); // 輸出: [1, 3, 5]
- 控制併發數
在處理諸如文件上傳等場景時,可能需要限制同時進行的異步操作數量以避免系統資源耗盡。
async function asyncPool(poolLimit, array, iteratorFn) {
const result = [];
const executing = [];
for (const item of array) {
const p = Promise.resolve().then(() => iteratorFn(item, array));
result.push(p);
if (poolLimit <= array.length) {
const e = p.then(() => executing.splice(executing.indexOf(e), 1));
executing.push(e);
if (executing.length >= poolLimit) {
await Promise.race(executing);
}
}
}
return Promise.all(result);
}
// 示例
async function uploadFile(file) {
// 文件上傳邏輯
}
async function limitedFileUpload(files) {
return asyncPool(3, files, uploadFile);
}
- 使用
async/await
優化遞歸
遞歸函數是編程中的一種常用技術,async/await
可以很容易地使遞歸函數進行異步操作。
// 異步遞歸函數
async function asyncRecursiveSearch(nodes) {
for (const node of nodes) {
await asyncProcess(node);
if (node.children) {
await asyncRecursiveSearch(node.children);
}
}
}
// 示例
async function asyncProcess(node) {
// 對節點進行異步處理邏輯
}
- 異步初始化類實例
在 JavaScript 中,類的構造器(constructor)不能是異步的。但可以通過工廠函數模式來實現類實例的異步初始化。
class Example {
constructor(data) {
this.data = data;
}
static async create() {
const data = await fetchData(); // 異步獲取數據
return new Example(data);
}
}
// 使用方式
Example.create().then((exampleInstance) => {
// 使用異步初始化的類實例
});
- 在
async
函數中使用await
鏈式調用
使用await
可以直觀地按順序執行鏈式調用中的異步操作。
class ApiClient {
constructor() {
this.value = null;
}
async firstMethod() {
this.value = await fetch('/first-url').then(r => r.json());
return this;
}
async secondMethod() {
this.value = await fetch('/second-url').then(r => r.json());
return this;
}
}
// 使用方式
const client = new ApiClient();
const result = await client.firstMethod().then(c => c.secondMethod());
- 結合
async/await
和事件循環
使用async/await
可以更好地控制事件循環,像處理 DOM 事件或定時器等場合。
// 異步定時器函數
async function asyncSetTimeout(fn, ms) {
await new Promise(resolve => setTimeout(resolve, ms));
fn();
}
// 示例
asyncSetTimeout(() => console.log('Timeout after 2 seconds'), 2000);
- 使用
async/await
簡化錯誤處理
錯誤處理是異步編程中的重要部分。通過async/await
,可以將錯誤處理的邏輯更自然地集成到同步代碼中。
async function asyncOperation() {
try {
const result = await mightFailOperation();
return result;
} catch (error) {
handleAsyncError(error);
}
}
async function mightFailOperation() {
// 有可能失敗的異步操作
}
function handleAsyncError(error) {
// 錯誤處理邏輯
}
通過以上七個async/await
的高級用法,開發者可以在 JavaScript 中以更加聲明式和直觀的方式處理複雜的異步邏輯,同時保持代碼整潔和可維護性。在實踐中不斷應用和掌握這些用法,能夠有效地提升編程效率和項目的質量。
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/XQHcCZD8qKt9ulpYjthz4g