fetch, promise, async, await를 들었을 때 연관성을 이해하지 못하고 계속 어떤 것인지에 대한 의문만 가지고 있었다. 코드를 작성할 때 왜라는 의문이 계속 들어서 각 어떤 특성을 가지고 있는지 어떤 역할을 하는지 알아보았다.

fetch(), promise

fetch는 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 한다.
promise는 입력한 값이 처리될 동안 기다림으로, 비동기 메서드에서 동기 메서드처럼 값을 반환할 수 있는 것입니다. 즉, 결과를 제공하겠다는 약속을 반환한다.
둘의 관계를 연결하면 fetch()에서 받아온 값을 promise 데이터 타입을 리턴한다.

promise는 3가지의 상태를 가지는데 기본적으로 pending 대기 상태를 가진다. fetch를 통해 값을 가져오는데 값을 가져오기까지의 상태가 pending이다.
여기서 2가지로 나누어진다. 값을 받아오기에 성공하면 fulfilled, 실패하면 rejected가 된다.

값을 받아오기에 성공하면 .then()을 사용한다. .then() 안에는 콜백함수를 사용해서 성공한 값을 콜백함수에 넣어 준다.

그럼 여기서 왜 async와 await가 나올까?

function test(){
	let a = fetch("주소").then(콜백함수);
    console.log("출력완료");
}

이런 함수가 있을 때 fetch가 출력된 값이 then안에 있는 콜백함수에 들어가면 콜백지옥에 빠질 수 있는 위험이 있다. 이걸 방지하기 위해서 .then() 대신 사용하는 것이 async, await입니다.

async function test(){
	let a = await fetch("주소");
    console.log("출력완료");
}

await는 promise를 해지하는 것으로 fetch의 값이 나올 때까지, 즉 fulfilled가 될 때까지 기다린다. 그 전까지는 다음 코드를 실행하지 않는다.
위의 코드를 보면 fetch에 입력된 주소에서 값을 가져오기 전까지 console.log("출력완료");을 실행하지 않는다.

그럼 async는 언제 사용하는가?
await를 사용하면 자신이 있는 공간이 비동기로 처리한다. 비동기로 처리하기 때문에 await도 비동기로 처리할 수 있는 공간이 필요하다. 그 공간을 async로 만들어준다. await를 사용하고자 하는 function()에 async를 사용해서 비동기 공간을 만들어준다.
정리하면 await는 성공할 때까지 기다리는 비동기이고, 이는 async공간에서 사용이 가능하다.

.json()도 promise이기 때문에 await json()으로 사용이 가능하다.