[자바스크립트 js] fetch / Promise 객체 / then 메소드 / Promise Chaining / 비동기 함수

  fetch

• 콜백을 파라미터로 전달 받지 않고, fetch함수가 리턴하는 어떤 객체의 then 메소드를 통해 콜백을 등록한다.
• fetch 함수는 Promise 객체를 리턴한다. (Promise 객체는 비동기 실행을 지원하는 문법)
• 서버에 requeset를 보내고 response를 받는 작업을 실행한다.
• promise 객체를 리턴한다.

 

 

 

 

 

  promise

• 어떤 작업에 대한 '상태 정보'를 가지고 있는 객체.
• 비동기 실행과 관련된 핵심 문법.
  fetch 함수가 request를 보내고 response의 결과를 가지게 되는데, 이러한 결과를 promise 객체에 저장한다.
• promise 객체는 3가지 중 하나의 상태를 가지게 된다.
  - pending 진행 중
  - fulfilled 성공 => promise는 '작업 성공 결과'를 추가적으로 가지게 된다.
  - rejected 실패 => promise는 '작업 실패 정보'를 추가적으로 가지게 된다. ex) 네트워크 끊김 등

 

직접 promise 객체 생성하기

• 아래 코드에서 보이는 파라미터 (resolve, reject)는 'executor 함수'라고 한다.
• resolve 파라미터 : fulfilled 상태로 만들 수 있는 함수가 연결된다.
• reject 파라미터 : rejected 상태로 만들 수 있는 함수가 연결된다.

1. resolve 함수

const p = new Promise((resolve, reject) => {
	setTimeout(() => { resolve('success'); }. 5000);
    // 5초 후에 fulfilled 상태가 된다.
});


p.then(result) => { console.log(result); });
// 결과
// success
// 5초 후에 fulfilled 상태가 되었고, success가 작업 성공 결과가 되어 출력된다.

 

2. reject 함수

const p = new Promise((resolve, reject) => {
	setTimeout(() => { reject new Error('fail))' }, 5000);
});


p.catch((error) => { console.log(result); });
// 결과
// Error: fail
// 5초 후에 reject 상태가 되었고, 에러 객체가 작업 실패 정보가 되어 출력된다.

 

 

 

 

 

  then 메소드

• promise 객체의 메소드
• promise 객체가 pending상태에서 fullfiled상태가 될 때 실행할 콜백을 등록하는 메소드.
• then 메소드 뒤에는 계속해서 then 메소드를 붙일 수 있다.
• 첫번째 then 메소드가 실행된 후에 그 다음 then 메소드가 차례대로 실행된다.
• then 메소드는 새로운 promise 객체를 리턴한다. 그래서 then 메소드 뒤에 then 메소드를 붙일 수 있다.

 

 

 

 

 

  promise chaining

• promise 객체에 then메소드를 연속적으로 붙이는 것.
• chaining : 이어 붙이기, 연달하기
• 비동기 작업을 순차적으로 수행해야 할 때 전체 코드를 좀 더 깔끔하게 나타내기 위해서 사용한다.

 

잠깐만!✋🏼 promise chain은 callback hell(콜백 헬)을 방지한다.

promise chain 사용을 안 하면 가독성이 떨어진다.

fetch('https://first.com', (response) => {
  // Do Something
  fetch('https://second.com', (response) => {
    // Do Something
    fetch('https;//third.com', (response) => {
      // Do Something
      fetch('https;//fourth.com', (response) => {
        // Do Something
      });
    });
  });
});

 

위 코드를 promise chain 하면

fetch('https://first.com')
  .then((response) => {
    // Do Something 
    return fetch('https://second.com');
  })
  .then((response) => {
    // Do Something 
    return fetch('https://third.com');
  })
  .then((response) => { 
    // Do Something 
    return fetch('https://third.com');
  });