Array.map과 함께 async await 사용

다음 코드가 주어진다 :

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

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

다음과 같은 오류가 발생합니다.

TS2322 : 'Promise <number> []'유형은 'number []'유형에 할당 할 수 없습니다. 'Promise <number> 유형은'number '유형에 할당 할 수 없습니다.

어떻게 고칠 수 있습니까? 어떻게 할 수 async await와 Array.map작업을 함께?

여기서 문제 await는 약속이 아닌 다양한 약속을 시도 하고 있다는 것입니다. 이것은 당신이 기대하는 것을하지 않습니다.

전달 된 객체 await가 Promise가 아닌 await경우 값을 해결하려고하지 않고 그대로 값을 반환합니다. 따라서 awaitPromise 대신 Promise 객체의 배열 을 전달했기 때문에 await에 의해 반환되는 값은 단순히 해당 유형의 배열 Promise<number>[]입니다.

여기서해야 할 일은 Promise.all배열 map을 단일 Promise로 변환하기 위해 반환 된 배열을 호출 await하는 것입니다.

에 따르면 대한 MDN 워드 프로세서Promise.all :

이 Promise.all(iterable)메소드는 반복 가능한 인수의 모든 약속이 해결되거나 거부 된 첫 번째 전달 된 약속의 이유로 거부되는 약속을 리턴합니다.

따라서 귀하의 경우 :

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

이렇게하면 여기에서 발생하는 특정 오류가 해결됩니다.

네이티브 약속을 사용하지 않고 블루 버드를 사용하는 경우 다른 해결책이 있습니다.

Promise.map ()을 사용 하여 array.map과 Promise.all을 혼합 할 수도 있습니다

당신의 경우 :

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

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

약속의 배열에 매핑하면 모든 배열을 숫자의 배열로 해결할 수 있습니다. Promise.all을 참조하십시오 .

위에서 언급 한대로 Promise.all을 사용하는 것이 좋지만 실제로 그러한 접근 방식을 피하고 싶다면 for 또는 다른 루프를 수행 할 수 있습니다.

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

아래의 해결 방법은 배열의 모든 요소를 ​​비동기 적으로 처리하고 순서를 유지합니다.

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

또한 codepen .

Promise.all에 대해서만 "기다리십시오". "대기"없이 여러 번 calc를 호출하고, 해결되지 않은 약속을 즉시 수집합니다. 그런 다음 Promise.all은 모든 해상도가 해결 될 때까지 기다렸다가 해결 된 값을 순서대로 배열로 반환합니다.