promise vs callback

hskwon517·2022년 7월 1일
0

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

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

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

// resolve:성공

// reject:실패

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

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

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

/posts/:id GET 포스트 조회

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);

};

profile
Frontend

0개의 댓글