Promise, Async-Await

• axios 동작 확인을 위해 아래의 링크에서 json 데이터 요청 했다.

const url = 'https://jsonplaceholder.typicode.com/users/' + sub_path;
// users : 모든 유저 정보 출력
// users/n : n번째 유저의 정보 출력

• 비동기 함수 호출의 수가 정해져있거나, 입력값이 고정적이라면 하드 코딩을 통해 구현이 가능하다.

Promise

• 자바 스크립트 비동기 처리에 사용되는 객체

프로미스의 상태

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태

  new Promise();
  //또는
  new Promise(function (resolve, reject) {});
  // 또는
  new Promise((resolve, reject) => {});

• Fulfilled(이행) : 비동기 처리가 왼료되어 프로미스가 결과 값을 반환해준 상태
  • 이행 상태 == 완료 상태
  • 이행 상태가 되면 then()을 사용해 처리 결과를 받을 수 있음

  const getData = () => {
    return new Promise((resolve) => {
      resolve(100);
    });
  };
  
  getData.then((result) => {
    console.log(result);
    // [expect result] 100
  });

• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
  • 실패 상태일 경우 catch() 로 받을 수 있음

  const getData = () => {
    return new Promise((reject) => {
      reject(new Error('request is failed'));
    });
  };
  
  getData.catch((err) => {
    console.log(err);
    // [expect result] Error: request is failed
  });

async-await

• promise와 같이 비동기 코드를 작성하는 방법 (ES8 스펙)
• 장점
  • ⭐ Java와 같이 동기적으로 코딩 가능 : 위에서 아래로 순차적으로 진행
  • 코드가 간결해지고, 가독성이 높아짐
  • 응답데이터로 돌아오는 변수 (data, response ...) 를 없앨 수 있음
  • try / catch로 에러를 핸들링할 수 있음
  • 에러가 어디서 발생했는지 알기 쉬움
• 사용 방법
  • 함수 선언 시 async 단어 붙임
  • await이라는 단어는 async로 정의된 함수에서만 사용
    
    비동기 함수를 호출할 때 앞에 붙여 사용

// promise일 때
const data = () => {
    getData()
    .then(result =>
        return result;
    )
    .catch(err => {
        console.log(err)
    })
}

// async-await일 때
const data = async() => {
    return await getData();
}