async
promise와 async
전에 배웠던 Promise를 좀 더 깔끔하고 편리한 방식으로 사용 가능하게 해주는 녀석이다
참고로 Promise와 아예 다른 흐름으로 작동하는지 물어보면 절대 아니다
둘의 도달점과 목표는 같다 하지만 가는 길이 살짝 다를 뿐이다
그렇다면 Promise의 간단한 예시코드를 보자
const promise = new Promise((resolve,reject)=> {
resolve('hello');
});
promise.then((res) => {
console.log(res);
})이때 우리는 결과의 result값에 도달하지 못했다
따라서 then을 이용하여 res를 출력하는 함수를 작성했다
하지만 async await을 사용하면 도달이 가능해진다
async function HI() {
return 'HI';
}
console.log(HI());만약 이렇게 작성하게 되면 결과는 다음과 같다
Promise객체를 반환했으므로 then을 사용해보면 다음과 같다
HI().then(console.log);
우선 여기까지의 내용을 바탕으로 한 번 정리를 해보자
- async를 function 앞에 붙여서 비동기를 선언할 수 있다
- 이는 Promise객체를 반환한다(실행이 된 상태)
- 따라서 반환된 값에 .then()을 사용할 수 있다
그렇다면 여기서 드는 의문은 분명 아까는 result에 도달할 수 있다고 했는데 도달하지 않았다, 와 reject를 하고 싶으면 어떻게 하냐라는 질문이 나올 수 있다
하나씩 알아보겠다
async에서 reject
우선 명심해야할 것은 async도 promise와 마찬가지로 promise객체를 반환한다는 것이다
따라서 함수가 실행되면 성공과 실패로 나뉘어 전달이 된다
이때 거절된 함수를 명시적으로 나타내기 위해선 내부에 Promise.reject()함수를 이용하는 것이다
async function HI() {
Promise.reject("에러입니다");
}
HI().then(console.error);결과는 다음과 같다
await
async await에서 async가 하는 역할을 이제는 알겠다
하지만 await은 대체 뭐하는 녀석인가?
사실 await의 진가는 이러한 동기적 작동이 가능한 코드가 아닌 서버와 통신하는 비동기적 작동에서 빛을 발한다
async로 선언된 함수가 실행되다가 await을 만나면 그 자리에서 함수가 일시 정지하고 실행이 완료되면 다음으로 넘어가게 한다
이는 함수의 흐름을 제어할 뿐만 아니라 result의 값도 가져올 수 있다
실제로 await에는 Promise의 실행 결과가 담긴다
코드로 살펴보자
async function HI() {
const promise = new Promise((res, rej) => {
setTimeout(() => {
res = 'HI';
}, 1000);
});
const result = await promise;
return result;
}
console.log(HI());
이때 await을 만나 promise가 실행될때까지 기다렸다가 result에 할당하기에 문제 없이 값을 출력하는 모습이다
참고로 await은 async로 선언된 함수 내부에서만 작동한다
(사실 외부에서도 작동하지만 Promise 객체의 앞에서 작동한다)
top-level-await
await은 원래 async로 선언된 함수 내부에서만 작동했었다
하지만 최근에 top-level-await이라는 개념이 도입되며 외부에도 await을 사용할 수 있게 되었다
참고로 그 전엔 이러한 방식을 활용하기 위해 IIAFE(Immediately Invoked Async Function Expression)패턴을 사용했었다
단점으로는 최근에 적용됐기 때문에 vite에서 잘 인식하지 못한다는 점이 있다
이는 fetch와 함께 살펴보자
fetch
fetch는 xhr과 더불어 비동기 통신을 도와주는 녀석이다
fetch로 실행하게 되면 기본적으로 promise객체를 반환한다
또한 그 내부에 response객체를 포함해 서버 응답시에 일어난 모든 일을 알 수 있다
dummy data로 예를 들어보자
dummy data 주소
const response = await fetch('https://jsonplaceholder.typicode.com/users');
console.log(response);
결과를 살펴보자
우리가 살펴봤었던 status는 제대로 통신을 했으므로 200이 할당되었다
또한 실행이 완료됐다는 의미로 ok에 true가 할당되었다
그리고 url도 역시 마찬가지로 잘 나오는 모습이다
이번엔 Response에 대해 더 자세히 살펴보자
우리가 주목해서 봐야할 녀석은 json이다
그렇다면 다시 console로 json을 불러보자
console.log(response.json());
놀랍게도 통신한 데이터를 모두 가지고 있다
이때 이 json의 배열을 추출하기 위해 await을 사용한다
console.log(await response.json());
다시 정리해보면 fetch는 이렇다
- fetch는 promise객체를 반환한다
- fetch는 top-level-await을 사용하여 결과를 출력할 수 있다
- fetch는 response객체를 포함하여 반환한다(통신의 결과에 대한 정보)
- GET통신을 한 정보가 json에 담긴다
좀 더 디테일한 면을 살펴보면 기존의 json파일을 불러오고 내보낼 때 JSON.parse()와 JSON.stringify() 를 사용했었다
하지만 우리는 방금 await response.json()만으로도 정상적인 배열을 출력했다
이는 .json()이 parse의 역할까지 포함하고 있기 때문이다
그리고 fetch는 기본적으로는 GET을 default로 하고 있다
만약 POST,PUT,DELETE를 하고 싶다면 두 번째 인수로 배열을 전달하면 된다
여기에는 method뿐 아니라 body, 혹은 headers와 같은 xhr에서 사용한 것들을 똑같이 전달해줄 수 있다
