Sử dụng async đang chờ với Array.map

Cho mã sau:

var arr = [1,2,3,4,5];

var results: number[] = await arr.map(async (item): Promise<number> => {
        await callAsynchronousOperation(item);
        return item + 1;
    });

tạo ra lỗi sau:

TS2322: Loại 'Hứa <số> []' không thể gán cho loại 'số []'. Nhập 'Promise <number> không thể gán cho loại' số '.

Làm thế nào tôi có thể sửa chữa nó? Làm thế nào tôi có thể làm async awaitvà Array.maplàm việc cùng nhau?

Vấn đề ở đây là bạn đang cố gắng thực hiện awaitmột loạt các lời hứa chứ không phải là một lời hứa. Điều này không làm những gì bạn mong đợi.

Khi đối tượng truyền đến await không phải là một Lời hứa, awaitchỉ cần trả về giá trị như là ngay lập tức thay vì cố gắng giải quyết nó. Vì vậy, vì bạn đã truyền awaitmột mảng (của các đối tượng Promise) ở đây thay vì một Promise, giá trị được trả về bằng cách chờ đợi chỉ đơn giản là mảng đó, thuộc loạiPromise<number>[] .

Những gì bạn cần làm ở đây là gọi Promise.all vào mảng được trả về mapđể chuyển đổi nó thành một Promise trước khi nhập awaitnó.

Theo tài liệu MDN choPromise.all :

Các Promise.all(iterable) phương thức trả về một lời hứa mà giải quyết khi tất cả các lời hứa trong đối số iterable đã được giải quyết, hoặc từ chối với lý do của lời hứa đầu tiên trôi qua mà từ chối.

Vì vậy, trong trường hợp của bạn:

var arr = [1, 2, 3, 4, 5];

var results: number[] = await Promise.all(arr.map(async (item): Promise<number> => {
    await callAsynchronousOperation(item);
    return item + 1;
}));

Điều này sẽ giải quyết lỗi cụ thể mà bạn đang gặp phải ở đây.

Có một giải pháp khác cho nó nếu bạn không sử dụng Promise gốc mà là Bluebird.

Bạn cũng có thể thử sử dụng Promise.map () , trộn mảng.map và Promise.all

Trong trường hợp của bạn:

  var arr = [1,2,3,4,5];

  var results: number[] = await Promise.map(arr, async (item): Promise<number> => {
    await callAsynchronousOperation(item);
    return item + 1;
  });

Nếu bạn ánh xạ tới một mảng các Lời hứa, thì bạn có thể giải quyết tất cả chúng thành một mảng các số. Xem Promise.all .

Tôi khuyên bạn nên sử dụng Promise.all như đã đề cập ở trên, nhưng nếu bạn thực sự muốn tránh cách tiếp cận đó, bạn có thể thực hiện một hoặc cho bất kỳ vòng lặp nào khác:

const arr = [1,2,3,4,5];
let resultingArr = [];
for (let i in arr){
  await callAsynchronousOperation(i);
  resultingArr.push(i + 1)
}

Giải pháp dưới đây để xử lý tất cả các phần tử của một mảng không đồng bộ VÀ giữ nguyên thứ tự:

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const randomDelay = () => new Promise(resolve => setTimeout(resolve, Math.random() * 1000));

const calc = async n => {
  await randomDelay();
  return n * 2;
};

const asyncFunc = async () => {
  const unresolvedPromises = arr.map(n => calc(n));
  const results = await Promise.all(unresolvedPromises);
};

asyncFunc();

Ngoài ra codepen .

Lưu ý rằng chúng tôi chỉ "chờ đợi" cho Promise.all. Chúng tôi gọi calc mà không "chờ đợi" nhiều lần và chúng tôi thu thập một loạt các lời hứa chưa được giải quyết ngay lập tức. Sau đó, Promise.all chờ đợi độ phân giải của tất cả chúng và trả về một mảng với các giá trị được giải quyết theo thứ tự.