fatch

네트워크 요청을 통해 리소스를 가져올 때 사용하는 함수.
fetch는 promise를 반환.

promise는 romise는 JavaScript에서 비동기 작업을 처리하기 위한 객체로, 세가지 상태를 가진다.

• 대기(Pending): 비동기 함수가 아직 시작하지 않은 상태.
• 이행(Fulfilled): 비동기 함수가 아직 시작하지 않은 상태.
• 거부(Rejected): 비동기 함수가 실패한 상태.

따라서 Promise 상태에 따라 then(), catch() 함수를 사용하여 처리한다.

왜 fetch 함수가 Promise를 반환?

fetch 함수는 네트워크 요청을 시작할 때 즉시 결과를 반환할 수 없다. 요청이 완료되기 전까지 시간이 걸리기 때문에, fetch 함수는 Promise를 반환하여 비동기적으로 결과를 처리할 수 있도록 한다.

예시 스크립트

 console.log("이전 작업"); 
        console.log("비동기 요청");
        fetch('https://jsonplaceholder.typicode.com/todos/1')
            .then(response => {
                if (!response.ok) {
                    throw new Error('응답 에러');
                }
                return response.json();
            })
            .then(data => {
                setTimeout(() => {
                    console.log("응답 받음");
                    document.getElementById('titleInput').value = data.title;
                }, 2000);
            })
            .catch(error => {
                console.error('비동기 요청 에러:', error);
            });
        console.log("다음 작업");

콘솔창 열어서 실행결과를 확인해보면,
1. 이전 작업
2. 비동기 요청
3. 다음작업
4.(에러없이 이행된다면) 응답받음

왜?

작업흐름을 보면, 순차적으로 다음작업이 먼저 실행되고 "응답 받음"이 출력 되기까지 2초의 시간이 지나고서 출력되기 때문.

Async/Await

왜 쓰나?
비동기코드를 보다 간결하고 직관적으로 작성할 수 있어서.

어떻게 쓰나?
함수의 앞에 async 키워드를 붙여서 정의한다.함수는 항상 Promise를 반환하며, await 키워드를 사용하여 다른 Promise나 async 함수의 결과를 기다린다.

await의 역할은?

async 함수 내에서만 사용할 수 있고, 이 키워드는 Promise가 처리되거나 거부될 때까지 함수의 실행을 일시 정지시키며, Promise가 처리되면 결과 값을 반환하고 다음 코드를 실행시킨다.

예시 스크립트

function fetchTitle() {
            console.log("비동기 요청");
            setTimeout(async () => {
                try {
                    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
                    if (!response.ok) {
                        throw new Error('응답 에러');
                    }
                    const data = await response.json();
                    console.log("응답 받음");
                    document.getElementById('titleInput').value = data.title;
                } catch (error) {
                    console.error('비동기 요청 에러:', error);
                }
            }, 2000);
        }
        console.log("이전 작업");
        fetchTitle();
        console.log("다음 작업");

콘솔창 열어서 실행결과를 확인해보면,

1. 이전 작업
2. 비동기 요청
3. 다음작업
   4.(에러없이 이행된다면) 응답받음

console.log("이전 작업"); 이 먼저출력,
fetchTitle(); 비동기 요청 함수 실행으로 console.log("비동기 요청");이 출력,
순차적으로 console.log("다음 작업");이 출력되고
2초 이후, 에러가 없다면 console.log("응답 받음");이 출력됨.