JavaScript - fetch, async, await, Promise

haechi·2022년 8월 30일

Web

목록 보기

59/69

fetch

리소스를 비동기 요청할 수 있다.
주로 API를 호출하고 응답 데이터를 받아오는 역할

기본적으로 첫 번째 인자에 요청할 url이 들어간다. 디폴트로 http메소드 중 get으로 동작한다.
호출 -> 해당 주소에 요청을 보냄 -> response를 받는다 -> 첫 번째 then에서 응답을 받는다 -> .json() 으로 파싱한 json 값을 리턴 -> 다음 then 에서 리턴받은 json을 받아서 처리

fetch("~~~")
.then(function(res){
	return res.json();
})
.then(function(json){
	console.log(json);
});

// ES6
fetch("~~~")
.then(res => res.json())
.then(json => console.log(json));

ex) API 호출을 통해 리소스를 받고 그 값으로 어떤 변수를 초기화해야하는 경우

let text = "";
fetch("~~~")
.then(res => res.json)
.then(json => {
	text = json;
});
console.log(text);

결과는? 빈 문자열이 나온다. -> fetch는 비동기 작업을 담당한다. 비동기 처리는 시간이 소요되는 작업이 완료될 때까지 기다리는 것이 아니라 따로 처리하기 때문에, 다른 코드들도 먼저 실행할 수 있게 한다. 따라서 순서가 보장되지 않기 때문에 text = json이 처리 되기 전에 console.log(text)가 실행되어 빈 문자열이 나오는 것
-> 어떻게 해야하나?

비동기 처리로 얻은 데이터를 이용해야하는 경우, 비동기 처리가 모두 완료된 뒤 작업을 진행하는 등 흐름을 제어해야한다.

callback 함수 사용

function getTitle(callback){
	let text="";
    fetch("~~~")
    .then(res => res.json())
    .then(json => callback(json));
}

function callBackFunc(data){
	text = data[0].title;
    console.log(text);
}

getTitle(callBackFunc);

getTitle 함수에 callBackFunc을 넣어서 fetch이후 마지막 then에서 callBackFunc을 수행하도록 한다.

async / await

async는 function 앞에 위치한다. async 함수는 항상 promise를 반환한다.(아닌 것은 promise로 감싸서 반환)
await는 async 함수 안에서만 동작한다. await는 promise가 처리될 때 까지 기다린다.

function getTitle(){
	const response = fetch("~~~");
    return response.then(res => res.json());
}

async function exec(){
	let text;
    try {
    	text = await getTitle();
        console.log(text[0].title;
    }
    catch(error){
    	console.log(error);
    }
}

exec();

해당 코드에서 getTitle 함수는 fetch를 통해 호출한 API로 부터 응답 데이터를 받고 JSON으로 파싱 후 리턴하는 부분만 담당한다. 리턴한 데이터를 받아서 처리하는 함수가 exec이다.
await getTitle() 부분에서 getTitle 함수의 작업 결과값을 얻을 때가지 기다린다.

Promise?

자바스크립트 비동기 처리에 사용되는 객체.

Promise의 3가지 states(상태)

Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
Rejected(실패) : 비동기 처리가 실패 혹은 오류가 발생한 상태

Pending(대기)

new Promise();

기본적으로 new Promise() 메소드를 호출하면 대기 상태이다.

new Promise(function(resolve, reject) {
	// ...
}

해당 메소드를 호출할 때 콜백 함수를 선언할 수 있다. 이 콜백 함수의 인자는 resolve, reject이다.

Fulfilled(이행)

new Promise(function(resolve, reject) {
	resolve();
}

콜백 함수의 인자 resolve를 실행하면 이행 상태가 된다.

function getDate(){
	return new Promise(function(resolve, reject) {
    	let data = 100;
        resolve(data);
    });
}

getData().then(function(resolvedData){
	console.log(resolvedData);
});

이행 상태가 되면 then()을 사용하여 처리 결과 값을 받을 수 있다.

Rejected(실패)

new Promise(function(resolve, reject) {
	reject();
});

위와 같이 reject를 호출하면 실패 상태가 된다.

function getData() {
	return new Promise(function(resolve, reject){
    	reject(new Error("Request is failed"));
    });
}

getData().then().catch(function(err){
	console.log(err);
});