Promise , fetch, async, await | api 호출 때 프로세스 이해하기

전체 요약:

비동기를 async를 통해서 관리.

Promise를 사용해서 특정 fetch 내용이 읽어질 때까지 web Api쪽으로 이동되고, await로 뒷 함수 실행을 막아주고,

 

그 사이에 call stack에서는 다른 함수들이 실행되고, fetch 가 끝나면 다시 queue로 이동하고서 그 이벤트 루프를 통해 stack이 비어 있을 때 stack으로 이동해서 그 await와 .then()의 함수들을 실행하게 된다.

 

따라서, await는 비동기 작업의 완료를 기다리는 동안 Call Stack에서 다른 작업들이 우선적으로 실행되도록 합니다. 그리고 비동기 작업이 완료되면, 그 결과를 가지고 await 뒤의 코드가 실행

 

---

Promise

 

Promise에서는 resolve와 reject라는 두 가지 함수가 있습니다. 이 함수들은 Promise 객체의 상태를 결정하는 데 사용됩니다. Promise 객체는 세 가지 상태 중 하나를 가지게 되는데, 이는 pending (진행 중), fulfilled (성공적으로 이행됨), rejected (거부됨)입니다.

 

resolve 함수: 이 함수는 Promise를 fulfilled 상태로 전환합니다. resolve 함수가 호출되면, Promise는 성공적으로 완료된 것으로 간주되고, 그에 따른 결과값을 가지게 됩니다. resolve는 보통 Promise 내부에서 비동기 작업이 성공적으로 완료되었을 때 호출됩니다.

new Promise((resolve, reject) => {

  // 비동기 작업 수행

  if (/* 작업 성공 */) {

      resolve(value); // 성공 시 resolve 호출

  }

});

---

reject 함수: 반대로, reject 함수는 Promise를 rejected 상태로 전환합니다. reject 함수가 호출되면, Promise는 실패한 것으로 간주되고, 거부 이유(오류)를 가지게 됩니다. reject는 보통 Promise 내부에서 비동기 작업 중 오류가 발생했을 때 호출됩니다.

new Promise((resolve, reject) => {

  // 비동기 작업 수행

  if (/* 작업 실패 */) {

      reject(error); // 실패 시 reject 호출

  }

});

 

resolve와 reject 함수는 Promise의 생성자에 전달되는 콜백 함수 내에서 사용됩니다. 이 콜백 함수는 Promise 객체가 생성될 때 자동으로 실행되며, 이 안에서 비동기 작업을 수행하고 그 결과에 따라 resolve 또는 reject를 호출합니다.

Promise 객체의 상태가 한 번 결정되면 변경되지 않으므로, resolve 또는 reject가 한 번 호출된 후에는 다른 상태로 전환될 수 없습니다.

 

---

-코드 예시-

resolve 함수의 반환값 즉, 양수나 음수가 return값이 되어 res로 전달되게 된다.

---

.then()

원래 콜백 함수를 연이어 부르면 콜백함수 안의 함수 안의 ... 이런 식으로 안으로 들어가져서 안에서 부터 실행이 되는건데 .then을 써서 그 리턴값을 바로 받아 볼 수 있게 하는 것

 

 

-코드예시-

fetch('https://jsonplaceholder.typicode.com/posts/1')

  .then(response => response.json()) // 첫 번째 .then()

  .then(data => {

      console.log(data);

      // 추가 작업 수행

  }) // 두 번째 .then()

  .catch(error => {

      console.error('Error:', error);

  }); // 오류 처리

 

.then() 메서드: .then() 메서드는 Promise가 fulfilled 상태가 되었을 때 실행될 콜백 함수를 설정합니다. 이 메서드는 Promise 객체에 체이닝되어 사용될 수 있으며, 각 .then()은 이전 Promise의 결과를 인자로 받습니다. 또한, .then()은 새로운 Promise를 반환하기 때문에, 연속적으로 .then()을 체이닝할 수 있습니다.

 

---

async 함수

• async 함수: 함수 앞에 async를 붙이면, 해당 함수는 항상 Promise를 반환합니다. 함수 내에서 반환되는 값은 Promise의 resolve 값으로 간주됩니다. 즉, async 함수 내부에서 return value;를 사용하면 이는 Promise.resolve(value);와 동등한 효과를 가집니다.
• 비동기 처리: async 함수 내에서 await를 사용하여 Promise의 완료를 기다릴 수 있습니다. await는 Promise가 fulfilled 또는 rejected 상태가 될 때까지 함수의 실행을 일시 중지합니다.

---

비동기 처리의 이점

• 비동기 로직: JavaScript에서 비동기 로직을 사용하면, 시간이 걸리는 작업(예: 네트워크 요청)을 처리하는 동안 프로그램의 나머지 부분이 차단되지 않습니다. 이로 인해 애플리케이션의 응답성이 향상됩니다.
• 코드의 가독성: async/await는 콜백 기반의 비동기 코드에 비해 가독성이 뛰어나며, 동기 코드와 유사한 방식으로 비동기 로직을 작성할 수 있게 합니다.

then 사용

• .then() 메서드: Promise 객체에 .then()을 사용하면, Promise가 완료된 후에 실행할 추가 작업을 지정할 수 있습니다. .then() 내부에서 반환된 값 또는 Promise는 다음 .then() 체인의 입력으로 사용됩니다.
• 체이닝: .then()을 연쇄적으로 사용하여 복잡한 비동기 작업 흐름을 간결하게 표현할 수 있습니다.

---

요약

• async 함수는 Promise를 반환하고, 이를 통해 비동기 작업을 쉽게 관리할 수 있습니다.
• await는 async 함수 내에서 Promise의 완료를 기다리는 데 사용됩니다.
• .then()은 Promise의 결과에 대한 추가 처리를 위해 사용되며, 이를 통해 비동기 작업의 흐름을 효율적으로 제어할 수 있습니다.

따라서, 비동기 로직을 사용하여 프로그램의 전체적인 효율성과 가독성을 개선할 수 있으며, async/await와 .then()을 통해 이러한 비동기 작업을 더욱 쉽게 관리할 수 있습니다.

---

 

Q1. 이미지 파일 처럼 그냥 fetch('주소').json() 이렇게 할 순 없니? 왜 두 변수에 나눠서 담은지도 모르겠다.

 

Q2. 두번째 변수에 굳이 await를 써준 이유도 모르겠어. 어차피 윗 함수 다음에 실행되는거 아냐? 순서는 같은 async 안에서의 활동이니까 정해져 있잖아?

 

Q1, Q2는 하나의 개념만 알면된다.

 

node.js ,ejs 로 해본 ssr 상황을 생각해보자. 

어떠한 클라이언트 창이 있고, 거기서 클라이언트가 요청을 하는게 get, post 등의 요청방식인데 이게 일종의 fetch의 역할과 비슷하다.(다르긴 한데 같다고 보겠음)

이후, 서버에서 db랑 작업해서 res.render를 통해 돌려주는 작업을 한다.

 

결국 fetch와 json()은 서버로 접근하고 서버가 클라이언트에 값을 제공하는 엄연히 시간차가 나는 다른 행위들이다.

그러니 다른 변수에 저장하며, 즉각적으로 수행이 되지 않기 때문에 await로 시간간격을 넣어줘야 명령을 수행하는 것이다.

---

fetch 기능 

 

1.비동기 함수가 호출되면, 네트워크 요청과 같은 작업은 백그라운드에서 수행.

2.수행이 완료되면 fetch 함수는 즉시 Promise 객체를 반환합니다.

---

api 호출 때 프로세스 이해하기

 

출처 : 한 입크기로 잘라먹는 리액트

 

Call Stack은 무조건 맨 위에 있는 함수를 실행하는 도구.

setTimeout은 web Apis 안에서 실행되고 끝나면 함수를 callback queue로 함수를 전달.

callback Queue 는 잠시 대기 장소.

 

main Context 만 남게 될 경우 

event Loop를 통해 call Stack으로 이동된다.

---

 

fetch를 통해서 데이터를 읽어들인 경우, 바로 await 내용이 실행되는게 아니라, call Stack이 비워지는 타이밍에 callback queue에서 event 루프가 데이터를 await 뒷 내용을 stack으로 옮겨 실행된다.

 

• 데이터를 먼저 받아오는 경우: fetch와 같은 HTTP 요청은 Web APIs를 통해 처리되고, 요청이 완료되면 해당 콜백 함수는 Task Queue에 추가됩니다. 이 때 Call Stack이 비어있지 않으면, 즉 다른 작업이 실행 중이라면, 콜백 함수는 Call Stack이 비워질 때까지 대기합니다.
• 콘솔 출력의 우선 순위: 만약 콘솔 로그 출력(console.log)이 Call Stack에 이미 있고, 그 시점에 비동기 요청의 콜백이 Task Queue에 들어가면, 콘솔 로그가 먼저 처리됩니다. 콘솔 로그의 실행이 끝난 후 Call Stack이 비워지면, Event Loop는 Task Queue에서 대기 중인 콜백 함수를 Call Stack으로 옮겨 실행합니다.

즉, 데이터를 먼저 받았더라도 Call Stack에 다른 작업이 남아있다면, 해당 작업이 완료된 후에 비동기 작업의 콜백 함수가 실행됩니다. 따라서 데이터를 먼저 받아오더라도 콘솔 로그가 먼저 출력될 수 있습니다.