🌼 BE TIL Day 18 0406

⬇️ Main Note
https://docs.google.com/document/d/14h9Zm7pgkLXctqdm6-bxoeWfAcCxVD5rgprz2-t7hFA/edit

---

🌿 Callback

function myCallback() {
        const ccc = new XMLHttpRequest(); // new XMLHttpRequest()는 js에서 제공
        ccc.open("get", "http://numbersapi.com/random?min=1&max=200");
        ccc.send();
        ccc.addEventListener("load", (res) => {
          // 즉 load가 끝나면 여길 실행시켜줘 이거임
          console.log("데이터가 로드되면 이거 실행시켜줘!");
          console.log(res);
          const num = res.target.response.split(" ")[0];

          const ddd = new XMLHttpRequest(); // new XMLHttpRequest()는 js에서 제공
          ddd.open("get", `http://koreanjson.com/posts/${num}`);
          ddd.send();
          ddd.addEventListener("load", (res) => {
            console.log("두번째는 이거 실행시켜줘!");
            console.log(JSON.parse(res.target.response));
            const userId = JSON.parse(res.target.response).UserId;

            const eee = new XMLHttpRequest(); // new XMLHttpRequest()는 js에서 제공
            eee.open("get", `http://koreanjson.com/posts?userId=${userId}`);
            eee.send();
            eee.addEventListener("load", (res) => {
              console.log("마지막으로 이거 실행시켜줘!");
              console.log(res.target.response);
            });
          });
        }); // load: request 보내놓고 response 받으면 load되고 나서 실행시키고싶은 함수를 넣으면 됨
      } // 함수를인자로 넣어서 나중에 실행시켜줘 하는게 callback 함수

---

🌿 Promise

new Promise((resolve, reject) => {
        // 외부요청
        // 오래걸리는 작업 => 언제 끝날지 모르는것들을 여기서 작업을 하고
        resolve("철수");
        reject("다람쥐초등학교");
      })
        .then((res) => {
          //그게 끝나면 이걸 실행시켜줘
        })
        .catch((error) => {
          // 근데 만약 그 언제 끝날지 모르는 작업들중에서 오류가 나면 이걸 실행시켜줘
        });

      function myPromise() {
        console.log("1번 실행");
        axios
          .get("http://numbersapi.com/random?min=1&max=200")
          .then((res) => {
            console.log("2번 실행");
            const num = res.data.split(" ")[0];
            return axios.get(`http://koreanjson.com/posts/${num}`);
          })
          .then((res) => {
            // promise chaining
            console.log("3번 실행");
            const userId = res.data.UserId;
            axios.get(`http://koreanjson.com/posts?userId=${userId}`);
          })
          .then((res) => {
            console.log("4번 실행");
            console.log(res.data);
          });
        console.log("5번 실행");
      }

---

🌿 AsyncAwait

async function myAsyncAwait() {
        const result1 = await axios.get(
          "http://numbersapi.com/random?min=1&max=200"
        );
        const num = result1.data.split(" ")[0];
        const result2 = await axios.get(`http://koreanjson.com/posts/${num}`);
        const userId = result2.data.UserId;

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