[Javascript] fetch() 비동기 요청하기
fetch() 비동기 API 요청하기 기본틀
async function 함수명(인자){
let response = await fetch("url", {
method : "delete"
});
let parseResponse = await response.json();
if(parseResponse.code == 1){
alert("성공");
}else{
alert("실패");
}
}
fetch()
fetch() 는 HTTP를 요청할 수 있게 만드는 자바스크립트 함수이다. 여기서 파생된 라이브러리로 axios, $.ajax 를 사용하기도 한다. fetch() 는 네트워크에서 resource(url)를 가져오는 프로세스를 시작하고 어음(Promise)을 리턴한다.
await
await 는 async 가 붙은 함수가 어음(Promise)을 리턴하지 못하게 막고 어음이 끝날 때까지 기다리게 한다. 이는 저장 장치에서 어음이 이행되는 동안 CPU에게 다른 일을 할 수 있도록 하기 위함이다.
async
async 는 CPU가 다른 일을 하고 어음 이행이 완료된 함수로 돌아가기 위해 함수 앞에 표시한다. 이는 코드를 순차적으로 실행하는 동기적 프로그램을 비동기적으로 만들어 준다.
예제로 이해하기
async function 하늘그리기(){
// 구름그리기 코드...
let response = await fetch("http://www.구름데이터.com", {
method : "post"
});
// 파싱하기 = 코드를 띄어먹고 다음 함수 실행
let parseResponse = await response.json();
// 구름 움직이기 코드...
// 해그리기 코드...
}
function 나무그리기(){
//나무그리기 코드...
}
구름그리기();
나무그리기();하늘그리기와 나무그리기 라는 함수가 있습니다. 하늘그리기 안에 있는 구름그리기 코드는 fetch 함수를 사용해 구름데이터를 다운로드 한 후에 그리기 때문에 1초 정도 걸립니다. fetch 함수는 어음을 리턴하기 때문에 어음을 리턴하고 다음 코드인 해그리기 코드를 순차적으로 수행한 후 함수를 종료하고 다음 함수인 나무그리기를 실행합니다. 프로그램은 기본적으로 동기적으로 실행되기 때문에 구름그리기 코드에서 어음만 리턴받아 결과적으로 해그리기와 나무그리기 코드만 실행되어 화면에는 해와 나무 그림만 그려집니다. 하지만 여기서 await와 async를 사용하면 다시 구름그리기 코드로 돌아갈 수 있습니다. await는 fetch가 구름데이터를 다운로드 할 때까지 기다립니다. 이를 어음을 이행하고 있다고 표현합니다. 저장장치에서 구름데이터 다운로드하는 동안 CPU는 해그리기 코드와 나무그리기 코드를 실행하고 구름데이터의 다운로드가 끝나면 async가 적힌 함수로 다시 돌아가 나머지 일을 수행합니다. 구름 움직이기 코드와 같이 다운로드 후에 실행 될 수 있는 코드는 반드시 다운로드 다음에 코드를 적어야합니다. 이와 같은 방법은 본래 동기적으로 실행되는 코드를 비동기적으로 만들어줍니다.
동기적으로 작동할 경우
fetch 함수만 사용할 경우
await/async 함께 사용할 경우
fetch() 함수 응용하기
fetch() 함수는 HTTP를 요청할 때 키값을 사용해서 다양한 데이터를 함께 가지고 갈 수 있습니다. 키값의 종류는 MDN Web Docs 홈페이지에서 확인할 수 있으며 다음과 같이 사용합니다.
fetch(주소, {
method : “post”,
headers:{
“User-agent”:“Chrome”,
“Cookie”:“쿠키값”,
“Content-Type”:“application/json; charset=utf-8”
},
body:데이터(json)
});
