백엔드 18일차

이동현·2023년 4월 5일
0

코드캠프 백엔드

목록 보기
16/29

1. callback

1) 함수를 매개변수에 넣을 순 없을까?

2) 왜쓸까?

그전에는 요청을 기다리고 사용하는 것이 없었기에 콜벡 함수를 썼다.

      const myCallback = () => {
        const aa = new XMLHttpRequest();
        aa.open("get", "http://numbersapi.com/random?min=1&max=200");
        aa.send();
        aa.addEventListener("load", (res) => {
          console.log(res); // API 요청 결과
          const num = res.target.response.split(" ")[0]; // 65 (랜덤 숫자)

          const bb = new XMLHttpRequest();
          bb.open("get", ` https://koreanjson.com/posts/${num}`);
          bb.send();
          bb.addEventListener("load", (res) => {
            console.log(res); // API 요청 결과
            const userId = JSON.parse(res.target.response).UserId; // 문자열을 객체로 바꾸고 싶기에)

            const cc = new XMLHttpRequest();
            cc.open("get", `https://koreanjson.com/posts?userId=${userId}`);
            cc.send();
            cc.addEventListener("load", (res) => {
              console.log(res); // 최종 API 요청 결과
            });
          });
        });
      };

2. promise

 const myPromise = () => {
        axios.get(`http://numbersapi.com/random?min=1&max=200`).then((res) => {
          return axios
            .get(`http://numbersapi.com/random?min=1&max=200`)
            .then((res) => {
              return axios.get(`http://numbersapi.com/random?min=1&max=200`);
            })
            .then((res) => {
              // res 최종 결과
            });
        });
      };

3. asyncawait

const myAsyncAwait = async () => {
        await axios.get(`http://numbersapi.com/random?min=1&max=200`);
        await axios.get(`http://numbersapi.com/random?min=1&max=200`);
        await axios.get(`http://numbersapi.com/random?min=1&max=200`);
      };

0개의 댓글