callback,promise

함수의 인자에 함수를 넣어주는데, 이 넣어주는 함수를 콜백함수라고 한다.
async/await가 없던 예전에는 콜백 함수로 비동기 작업을 동기로 처리했다.

Promise 기본구조: resolve(요청 성공시 실행), reject(요청 실패시 실행)

new Promise((resolve,reject))=>{
    // 오래 걸리는 작업(외부 api 요청)

    // resolve:성공

    // reject:실패
  }

axios로 rest api 요청을 3번 해봤다

1. http://numbersapi.com/random?min=1&max=200에서 랜덤으로 숫자 얻기

2. 1번에서 얻은 숫자(num)를 http://koreanjson.com/posts/${num}에 넣어서 번호에 해당되는 게시물 userId 얻기(num번 글을 작성한 사람 정보)

   /posts/:id GET 포스트 조회

3. 2번에서 얻은 userId가 작성한 글 데이터 얻기

   /posts?userId={id} GET 유저별 포스트 목록

앞에 요청이 성공적으로 수행되어야 그 다음 요청을 수행할 수 있어서 연속적이다(chaining)

const onClickPromise = () => {
    // promise 잘못 사용->콜백 지옥과 다른게 없음
    axios.get(`http://numbersapi.com/random?min=1&max=200`).then((res) => {
      const num = res.data.split(" ")[0];
      axios.get(`http://koreanjson.com/posts/${num}`).then((res) => {
        const userId = res.data.UserId;
        axios
          .get(`http://koreanjson.com/posts?userId=${userId}`)
          .then((res) => {
            console.log(res.data);
          });
      });
    });

    // promise chain 활용
    axios
      .get(`http://numbersapi.com/random?min=1&max=200`)
      .then((res) => {
        const num = res.data.split(" ")[0];
        return axios.get(`http://koreanjson.com/posts/${num}`);
      })
      .then((res) => {
        const userId = res.data.UserId;
        console.log(userId);
        return axios.get(`http://koreanjson.com/posts?userId=${userId}`);
      })
      .then((res) => {
        console.log(res.data);
      });
  };

axios도 promise 객체이기 때문에 then을 실행할 수 있다.
이제는 then 구문대신 async,await로 하면 더 간단하게 구현할 수 있다.

const onClickAsyncAwait = async () => {
    const res1 = await axios.get(`http://numbersapi.com/random?min=1&max=200`);
    const num = res1.data.split(" ")[0];

    const res2 = await axios.get(`http://koreanjson.com/posts/${num}`);
    const userId = res2.data.UserId;

    const res3 = await axios.get(
      `http://koreanjson.com/posts?userId=${userId}`
    );
    console.log(res3.data);
  };