Cách xử lý nhiều sự chờ đợi trong chức năng async

Tôi có nhiều lệnh gọi API được thực hiện để tìm nạp thông qua API, ghi dữ liệu vào DB qua API, gửi đầu ra đến giao diện người dùng thông qua API khác.

Tôi đã viết chức năng async với sự chờ đợi như bên dưới -

Đầu tiên 2 nên chạy cái khác nhưng cái thứ ba có thể chạy độc lập và không cần đợi 2 câu lệnh tìm nạp đầu tiên hoàn thành.

let getToken= await fetch(url_for_getToken);
let getTokenData = await getToken.json();

let writeToDB = await fetch(url_for_writeToDB);
let writeToDBData = await writeToDB.json();

let frontEnd = await fetch(url_for_frontEnd);
let frontEndData = await frontEnd.json();

Cách tốt nhất để xử lý nhiều câu lệnh tìm nạp như vậy là gì?

Có nhiều cách nhưng phổ biến nhất là bọc từng đường dẫn mã async trong hàm async. Điều này cho phép bạn linh hoạt kết hợp các giá trị trả về async như bạn muốn. Trong ví dụ của bạn, bạn thậm chí có thể mã nội tuyến với async của iife:

await Promise.all([
  (async() => {
    let getToken = await fetch(url_for_getToken);
    let getTokenData = await getToken.json();

    let writeToDB = await fetch(url_for_writeToDB);
    let writeToDBData = await writeToDB.json();
  })(),
  (async() => {
    let frontEnd = await fetch(url_for_frontEnd);
    let frontEndData = await frontEnd.json();
  })()
]);

Bạn có thể sử dụng .then(), thay vì chờ đợi:

fetch(url_for_getToken)
  .then(getToken => getToken.json())
  .then(async getTokenData => {
    let writeToDB = await fetch(url_for_writeToDB);
    let writeToDBData = await writeToDB.json();
    // Carry on
  })

fetch(url_for_frontEnd)
  .then(frontEnd => frontEnd.json())
  .then(frontEndData => {
    // Carry on  
  })

Sẽ dễ dàng hơn nếu bạn làm việc với lời hứa "người tạo" (= chức năng trả lại lời hứa) thay vì lời hứa thô. Đầu tiên, xác định:

const fetchJson = (url, opts) => () => fetch(url, opts).then(r => r.json())

trong đó trả về một "tác giả" như vậy. Bây giờ, đây là hai tiện ích cho chuỗi nối tiếp và song song, chấp nhận cả lời hứa thô và "người tạo":

const call = f => typeof f === 'function' ? f() : f;

const parallel = (...fns)  => Promise.all(fns.map(call));

async function series(...fns) {
    let res = [];

    for (let f of fns)
        res.push(await call(f));

    return res;
}

Sau đó, mã chính có thể được viết như thế này:

let [[getTokenData, writeToDBData], frontEndData] = await parallel(
    series(
        fetchJson(url_for_getToken),
        fetchJson(url_for_writeToDB),
    ),
    fetchJson(url_for_frontEnd),
)

Nếu bạn không thích trình bao bọc "người tạo" chuyên dụng, bạn có thể xác định fetchJsonbình thường

const fetchJson = (url, opts) => fetch(url, opts).then(r => r.json())

và sử dụng các phần tiếp theo nội tuyến ngay tại nơi serieshoặc parallelđược gọi là:

let [[getTokenData, writeToDBData], frontEndData] = await parallel(
    series(
        () => fetchJson('getToken'),
        () => fetchJson('writeToDB'),
    ),
    () => fetchJson('frontEnd'), // continuation not necessary, but looks nicer
)

Để đưa ý tưởng đi xa hơn, chúng ta có thể thực hiện seriesvà paralleltrả lại "người sáng tạo" thay vì hứa hẹn. Bằng cách này, chúng ta có thể xây dựng các "mạch" lồng nhau tùy ý của các lời hứa nối tiếp và song song và nhận được kết quả theo thứ tự. Hoàn thành ví dụ làm việc:

const call = f => typeof f === 'function' ? f() : f;

const parallel = (...fns)  => () => Promise.all(fns.map(call));

const series = (...fns) => async () => {
    let res = [];

    for (let f of fns)
        res.push(await call(f));

    return res;
};

//

const request = (x, time) => () => new Promise(resolve => {
    console.log('start', x);
    setTimeout(() => {
        console.log('end', x)
        resolve(x)
    }, time)
});

async function main() {
    let chain = series(
        parallel(
            series(
                request('A1', 500),
                request('A2', 200),
            ),
            series(
                request('B1', 900),
                request('B2', 400),
                request('B3', 400),
            ),
        ),
        parallel(
            request('C1', 800),
            series(
                request('C2', 100),
                request('C3', 100),
            )
        ),
    );

    let results = await chain();

    console.log(JSON.stringify(results))
}

main()

.as-console-wrapper { max-height: 100% !important; top: 0; }

Chạy yêu cầu độc lập ( writeToDB) ở đầu và khôngawait

let writeToDB = fetch(url_for_writeToDB);

let getToken = await fetch(url_for_getToken);
let getTokenData = await getToken.json();

// ...