async/await then()

async/await 사용:

• async/await는 동기적인 코드처럼 읽히고 작성되기 때문에 이해하기 쉬움
• try/catch 블록을 사용하여 에러를 처리할 수 있음
• async/await는 복잡한 프로미스 체인을 피할 수 있어 코드의 구조화에 도움을 줌
• await를 사용하기 위해서는 함수가 async로 선언되어야 사용가능하다.

then() 체인 사용:

• 프로미스의 상태(해결됨, 거부됨)에 따른 결과 처리가 직관적
• Promise.all을 사용하여 여러 프로미스를 쉽게 병렬 처리가능
• 복잡한 비동기 작업에서 콜백 중첩이 발생할 수 있어 코드의 가독성이 떨어짐
• catch()를 사용한 에러 처리

Promise.all 사용법

function fetchData(url) {
 // URL에서 데이터를 가져오는 간단한 비동기 작업을 가정
    return fetch(url).then(response => response.json());
}

// 여러 URL에서 데이터를 동시에 가져옴
const url1 = 'https://api.example.com/data1';
const url2 = 'https://api.example.com/data2';
const url3 = 'https://api.example.com/data3';

Promise.all([fetchData(url1), fetchData(url2), fetchData(url3)])
    .then(allResponses => {
 // 여기서 allResponses는 각 URL로부터 받은 데이터의 배열
        console.log('Data from url1:', allResponses[0]);
        console.log('Data from url2:', allResponses[1]);
        console.log('Data from url3:', allResponses[2]);
    })
    .catch(error => {
  // 어느 한 프로미스라도 실패하면 catch 블록이 실행
        console.error('Error fetching data:', error);
    });

• fetchData 함수를 사용하여 각 URL로부터 데이터를 가져옴
• Promise.all은 fetchData로부터 반환된 프로미스들의 배열을 인자로 받음
• 모든 프로미스가 성공적으로 해결시 then 블록이 실행
• 각각의 응답이 배열에 담겨 반환 됨
• 만약 하나라도 실패하면, catch 블록이 실행되어 오류를 처리
  ⚠️예제 코드처럼 url에서 데이터를 동시에 가져올 때 예를 들어 여러 API 엔드포인트로부터 데이터를 가져와야 할 때, 동시에 처리하여 전체 응답 시간을 단축할 때 용이함