20个你不得不知道的JS async/await实用技巧

async function fetchData() {
    let data = await fetch('url');
    data = await data.json();
    return data;
}

async function fetchData() {
    try {
        let response = await fetch('url');
        response = await response.json();
        return response;
    } catch (error) {
        console.error('Fetching data error:', error);
    }
}

async function fetchMultipleUrls(urls) {
    const promises = urls.map(url => fetch(url).then(r => r.json()));
    return await Promise.all(promises);
}

async function fetchData(condition) {
    if (condition) {
        return await fetch('url');
    }
    return 'No fetch needed';
}

async function sequentialStart(urls) {
    for (const url of urls) {
        const response = await fetch(url);
        console.log(await response.json());
    }
}

async function processStream(stream) {
    for await (const chunk of stream) {
        console.log(chunk);
    }
}

async function getUser() {
    const { data: user } = await fetch('user-url').then(r => r.json());
    return user;
}

async function fetchData(url = 'default-url') {
    const response = await fetch(url);
    return response.json();
}

class DataFetcher {
    async getData() {
        const data = await fetch('url').then(r => r.json());
        return data;
    }
}

(async () => {
    const data = await fetch('url').then(r => r.json());
    console.log(data);
})();

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function delayedLog(item) {
    await delay(1000);
    console.log(item);
}

document.getElementById('button').addEventListener('click', async (event) => {
    event.preventDefault();
    const data = await fetch('url').then(r => r.json());
    console.log(data);
});

async function processArray(array) {
    for (const item of array) {
        await delayedLog(item);
    }
    console.log('Done!');
}

async function getConfig() {
    const { data, ...rest } = await fetch('config-url').then(r => r.json());
    return { config: data, ...rest };
}

const dataRetriever = {
    async fetchData() {
        return await fetch('url').then(r => r.json());
    }
};

async function* asyncGenerator(array) {
    for (const item of array) {
        yield await processItem(item);
    }
}

// ECMAScript 2020引入顶级await特性, 部署时注意兼容性
const config = await fetch('config-url').then(r => r.json());

(async function() {
    const data = await fetch('url').then(r => r.json());
    console.log(data);
})();

async function asyncRecursiveFunction(items) {
    if (items.length === 0) return 'done';
    const currentItem = items.shift();
    await delay(1000);
    console.log(currentItem);
    return asyncRecursiveFunction(items);
}

async function fetchDataBasedOnType(type) {
    switch (type) {
        case 'user':
            return await fetch('user-url').then(r => r.json());
        case 'post':
            return await fetch('post-url').then(r => r.json());
        default:
            throw new Error('Unknown type');
    }
}