7個Js async/awAIt高級用法

JAVAScript的異步編程已經(jīng)從回調(diào)(Callback)演進(jìn)到Promise，再到如今廣泛使用的async/await語法。后者不僅讓異步代碼更加簡潔，而且更貼近同步代碼的邏輯與結(jié)構(gòu)，大大增強(qiáng)了代碼的可讀性與可維護(hù)性。在掌握了基礎(chǔ)用法之后，下面將介紹一些高級用法，以便充分利用async/await實現(xiàn)更復(fù)雜的異步流程控制。

1. async/await與高階函數(shù)

當(dāng)需要對數(shù)組中的元素執(zhí)行異步操作時，可結(jié)合async/await與數(shù)組的高階函數(shù)（如map、filter等）。

// 異步過濾函數(shù)
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]

2. 控制并發(fā)數(shù)

在處理諸如文件上傳等場景時，可能需要限制同時進(jìn)行的異步操作數(shù)量以避免系統(tǒng)資源耗盡。

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);
}

3. 使用async/await優(yōu)化遞歸

遞歸函數(shù)是編程中的一種常用技術(shù)，async/await可以很容易地使遞歸函數(shù)進(jìn)行異步操作。

// 異步遞歸函數(shù)
async function asyncRecursiveSearch(nodes) {
    for (const node of nodes) {
        await asyncProcess(node);
        if (node.children) {
            await asyncRecursiveSearch(node.children);
        }
    }
}

// 示例
async function asyncProcess(node) {
    // 對節(jié)點進(jìn)行異步處理邏輯
}

4. 異步初始化類實例

在JavaScript中，類的構(gòu)造器（constructor）不能是異步的。但可以通過工廠函數(shù)模式來實現(xiàn)類實例的異步初始化。

class Example {
    constructor(data) {
        this.data = data;
    }

    static async create() {
        const data = await fetchData(); // 異步獲取數(shù)據(jù)
        return new Example(data);
    }
}

// 使用方式
Example.create().then((exampleInstance) => {
    // 使用異步初始化的類實例
});

5. 在async函數(shù)中使用await鏈?zhǔn)秸{(diào)用

使用await可以直觀地按順序執(zhí)行鏈?zhǔn)秸{(diào)用中的異步操作。

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());

6. 結(jié)合async/await和事件循環(huán)

使用async/await可以更好地控制事件循環(huán)，像處理DOM事件或定時器等場合。

// 異步定時器函數(shù)
async function asyncSetTimeout(fn, ms) {
    await new Promise(resolve => setTimeout(resolve, ms));
    fn();
}

// 示例
asyncSetTimeout(() => console.log('Timeout after 2 seconds'), 2000);

7. 使用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的高級用法，開發(fā)者可以在JavaScript中以更加聲明式和直觀的方式處理復(fù)雜的異步邏輯，同時保持代碼整潔和可維護(hù)性。在實踐中不斷應(yīng)用和掌握這些用法，能夠有效地提升編程效率和項目的質(zhì)量。