DAY 19 -TIL

async/await

• Promise를 활용한 비동기 코드를 간결하게 작성하는 문법
• async/await 문법으로 비동기 코드를 동기 코드처럼 간결하게 작성
• await 키워드는 반드시 async 함수 안에서만 사용가능
• await은 promise에서 리턴값이 반환되기 전까지 기다림
• anync로 선언된 함수는 반드시 Promise를 리턴
• await는 프로미스를 리턴하지 않는 함수도 사용가능, 리턴한 데이터는 Promise.resolve()로 감싸짐

 

async 함수

async function asyncFunc() {
	let data = await fetchData()
	let user = await fetchUser(data)
	return user
}

//function fetchData(){return new Promise(~~)}
//fetchData().then(data => {~~~})

• await 키워드는 then 메서드 체인을 연결한 것처럼 순서대로 동작
• 비동기 코드에 쉽게 순서를 부여
• Promise를 리턴하는 함수의 경우, 에러가 발생하면 catch메서드를 이용하여 에러를 처리
• catch 메서드를 사용하지 않는다면 anync함수에서 try-catch 구문을 이용하여 에러를 처리

async function asyncFunc() {
	let data1 = await fetchData1()
	let data2 = await fetchData2(data1)
	let data3 = await fetchData3(data2)
	return data3
}
function promiseFunc() {
	return fetchData1()
		.then(fetchData2)
		.then(fetchData3)
}

async function asyncFunc() {
	try {
		let data1 = await fetchData1()
		return fetchData2(data1)
	}catch (e) {
		console.log("실패 : ", e)	
	}
}

 

Fetch API

• 기존 XMLHTTPRequest를 대체하는 HTTP 요청 API
• ES6에 추가된 Promise를 리턴하도록 정의
• 네트워크 요청 성공 시, Promise는 Response 객체를 resolve
• 네트워크 요청 실패 시, Promise는 에러를 reject
• Response 객체는 결과에 대한 다양한 정보를 담음
• response.json() 메서드는 얻어온 body 정보를 json으로 만드는 Promise를 반환

function getData(serverURL)	
    fetch(serverURL)
		.then(response => response.json())
		.then(json => {
				console.log('body : ', json)
})

async getData(serverURL) {
	const response = await fetch(serverURL);
	const json = await response.json();
	return json;
}