프로미스의 내장 함수

Promise.all() // 모든 프로미스가 resolve되고 난 뒤 then으로 넘김
Promise.race() // 하나라도 resolve 혹은 reject된 값을 then으로 넘김
Promise.any() // 하나라도 resolve가 된 값을 then으로 넘김
Promise.allSettled() // 모든 프로미스가 resove 혹은 reject 되고 난 뒤 then으로 넘김
Promise.resolve() // 값을 promise로 감싸서 then으로 넘김
Promise.reject() // 값을 promise로 감싸서 chatch로 넘김

async/await

Promise.then().then().then();

위와 같은 프로미스 객체는 then을 통해서 resolve된 값을 전달받는다.

async function asyncAwait(){
const promise1 = await promise;
const promise2 = await promise1;
const promise3 = await promise2;
console.log(promise3) // 값
return promise3;
}
	console.log(asyncAwait) // 프로미스 값
	asyncAwait.then((e)=>console.log(e)) // 값

이런식으로 async 함수를 만들어서 그 안에 awiat 키워드를 붙이게 되면 동기적으로 작동하는것 처럼 보이게 만들어주지만 실제 동작은 비동기적으로 해서 가독성을 높일수 있다.

그리고 return값은 무조건 promise로 감싸져 나오지만 안에서는 값을 바로 출력할수 있다.

async function asyncAwait(){
	try{
				const value = await promise;
		}catch(e){
			console.log(e);
		}
}

애러가 발생할시 reject와 catch를 대신하여 try,catch를 이용할 수 있다.

fetch API

fetch("https://undefinedAPI") // 요청을 보내는 URL
        .then((res) => { // http애러가 나도 수행함
          if (res.ok) { // res.status가 200~299일 경우 true
            return res.json(); // 받은 요청의 몸체를 봅아냄
          } else {
            throw new Error(${res.status}! 요청 실패`); //catch로 애러를 날림
          }
        })
        .then((data) => {
          console.log(data);
        })
        .catch((error) => {
          console.log(error.message); // new Error의 인자로 받은 값을 출려
          console.log(error); // Error : {error.message} {오류가 난 부분}을 출력
        });

const headers = new Headers(); // 헤더 영역을 생성 
fetch(URL,{
method : 'GET' or 'POST' ... // 기본은 'GET'방식으로 되어있음.
headers
body : JSON.stringify(data) 
})

URL은 상수로 관리하자

느낀점

전에 axios라는 라이브러리를 썼던 적이 있는데 그때는 그냥 넣으면 알아서 되는 것인줄 알았다. xmlhttprequest와 프로미스객체를 배우고 fetch API를 배우니까 어떻게 동작하는지 이해가 가서 좋았다. axios도 마찬가지로 fetchAPI에서 어떤 점이 다른지 알것 같다. 회고를 작성하면서 나를 돌아보는 좋은 시간을 가졌다.