fetch 함수는 Promise 객체를 리턴합니다#3

🙌fetch 함수는 Promise 객체를 리턴합니다(Promise 동작원리)​

안녕하세요 TriplexLab입니다.
오늘은 fetch 함수에 관해서 자세히 알아봅시다.

fetch 함수는 promise 객체를 리턴합니다.
(fetch함수는 서버에 리퀘스트를 보내고 리스폰스를 받는 하나의 작업을 수행합니다.) 

console.log('Start!');

fetch('https://jsonplaceholder.typicode.com/users') //(fetch함수는 서버에 리퀘스트를 보내고 리스폰스를 받는 하나의 작업을 수행 합니다.) 
	.then((response) => response.text())
	.then((result) => {console.log(result)});

console.log('End');

위에 코드에서 fetch라는 저 한 줄의 코드에서 promise 객체를 리턴하는 것입니다.

그럼 promise 객체가 무슨 인지 설명하자면
(promise 객체는 어떤 작업에 관한 상태 정보를 갖고 있는 객체입니다.)

조금 더 구체적으로 말하면

promise 객체는 크게 3가지 중 1개의 상태를 가집니다.
1. 번째는 작업 진행 중을 의미하는 pending 상태
2. 번째는 작업 성공을 의미하는 fulfilled 상태
3. 번째는 작업 실패를 의미하는 rejected 상태
그럼 이 각각의 상태를 fetch함수가 수행하는 작업과 연관 지어 생각해 봅시다.

일단 맨 처음 fetch함수가 리턴하는 promise 객체는 작업 진행 중이기 때문에 pending 상태입니다.
그리고 그 후에 만약 리스폰스를 정상적으로 잘 받으면 이제 해당 promise 객체는 pending 상태에서 → fulfilled 상태가 됩니다.

promise 객체의 fulfilled 상태

하지만 만약에 네트워크가 끊겨서 리퀘스트를 보내지 못하거나,
서버에 문제가 생겨서 리스폰스를 받지 못한다면 promise 객체는
pending 상태에서 → rejected 상태가 됩니다.
이렇게  promise 객체는 어떤 작업의 상태를 가지고 있는 객체입니다.

promise 객체의 pending, fulfilled, rejected 상태

그리고 만약 작업이 성공해서 promise 객체가 fulfilled 상태가 되면
promise 객체는 그 작업의 성공 결과도 함께 가지게 됩니다.
아래 fetch함수 같은 경우에는 서버가 보내준 response가 작업의 성공 결과를 갖게 됩니다.

promise 객체의 작업 성공 결과

그리고 이것과 반대로
인터넷이 끊기는 등의 이유로 인해서 promise 객체가 rejected 상태가 되면
response가 작업 실패 이유에 관한 정보를 갖게 됩니다.

promise 객체의 작업 실패 정보

👉fetch 함수 정리

fetch함수는 promise객체를 리턴합니다.
그리고 promise객체는 어떤 작업에 관한 상태 정보를 갖고 있는데요.
promise는 작업의 상태에 따라서 그에 맞는 상태를 가집니다.
1. 작업이 진행 중이라면 pending 상태
2. 작업이 성공적으로 완료되었다면 fulfilled 상태
3. 작업이 성공적으로 완료 되었다면 fulfilled 상태 들을 가지게 됩니다.  
그리고 fulfilled 상태에 경우에는 그 작업의 성공 결과를, 
rejected 상태에 경우에는 그 작업의 실패 정보를 추가적으로 갖게 되는 것입니다.

pending, fulfilled, rejected 정리