[JS] Async, Await, Fetch, PromiseAll

async와 await

async와 await라는 특별한 문법을 사용하면 프라미스를 좀 더 편하게 사용할 수 있습니다.

async 함수

async 키워드부터 알아봅시다. async는 function 앞에 위치합니다.

async function fetchData(url) {
  try {
    const response = await fetch(url); // API 요청 보내기
    const data = await response.json(); // JSON 데이터 파싱하기
    return data; // 데이터 반환
  } catch (error) {
    console.log('Error:', error);
  }
}

// fetchData 함수 호출하기
fetchData('https://jsonplaceholder.typicode.com/todos/1')
  .then(data => console.log(data))
  .catch(error => console.log(error))

 

function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환합니다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 합니다.

 

await

await 문법은 다음과 같습니다.

// await는 async 함수 안에서만 동작합니다.
let value = await promise;

자바스크립트는 await 키워드를 만나면 프라미스가 처리될 때까지 기다립니다. 결과는 그 이후 반환됩니다.

리턴이 프로미스일때만 사용가능합니다.

 

fetch

fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환합니다. 반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject합니다.

 

옵션(options) 객체에는 HTTP 방식(method), HTTP 요청 헤더(headers), HTTP 요청 전문(body) 등을 설정해줄 수 있습니다. 응답(response) 객체로 부터는 HTTP 응답 상태(status), HTTP 응답 헤더(headers), HTTP 응답 전문(body) 등을 읽어올 수 있습니다.

 

참고로 fetch() 함수는 엄밀히 말해, 브라우저의 window 객체에 소속되어 있기 때문에 window.fetch()로 사용되기도 합니다

 

fetch() - GET

 

fetch('https://jsonplaceholder.typicode.com/todos/1', { method: 'GET' })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

 

fetch() - POST

 

const url = 'https://jsonplaceholder.typicode.com/posts';

const data = {
  title: 'foo',
  body: 'bar',
  userId: 1
};

const options = {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type': 'application/json'
  }
};

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

 

promiseAll

 

Promise.all()은 자바스크립트의 비동기 프로그래밍에서 사용되는 메서드 중 하나입니다. 이 메서드는 여러 개의 프로미스(Promise)를 인자로 받고, 모든 프로미스가 성공적으로 완료되었을 때 결과를 반환하는 새로운 프로미스를 생성합니다. 즉, 주어진 모든 프로미스가 성공적으로 처리되면, 해당 프로미스가 해결(resolve)되고 결과를 배열로 반환합니다. 하지만 한 개라도 실패하면, Promise.all()은 실패한 프로미스를 반환합니다.

 

	var promise1 = new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve("promise1 end");
		}, 1000);	
	});
	
	var promise2 = new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve("promise2 end");
		}, 2000);		
	});
	
	var promise3 = new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve("promise3 end");
		}, 10000);			
	});
	
	Promise.all([promise1, promise2, promise3]).then((...res) =>{
		
		debugger;
		
	}).catch((...res) => {
		
	});

10초 뒤에 결과를 받아 처리한다.

 

 

참조

https://ko.javascript.info/async-await