🌼 BE TIL Day 18 0406

j00b33Β·2022λ…„ 4μ›” 7일
0

CodeCamp BE 02

λͺ©λ‘ 보기
17/30

⬇️ 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);
      }
profile
두비두λ°₯λ°₯

0개의 λŒ“κΈ€