day18

antipiebse·2022년 4월 6일
0

node보충

callback

함수의 인자로 함수가 들어가는 경우가 있는데 이때 들어가는 인자를 콜백함수라고 한다.

계속해서 아래의 함수를 호출하므로 오래걸림.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>콜백과 친구들</title>
  <script>
    function myCallback(){
      const ccc = new XMLHttpRequest()
      ccc.open("get", "http://numbersapi.com/random?min=1&max=200")
      ccc.send()
      ccc.addEventListener('load',(res)=> {
        console.log("데이터가 로드되면 실행")
        console.log(res)
        const num =res.target.response.split(" ")[0]

        const ddd = new XMLHttpRequest()
        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()
          eee.open("get", `http://koreanjson.com/posts?userId=${userId}`)
          eee.send()
          eee.addEventListener("load", (res)=>{
            console.log('마지막으로 이거 실행시켜줘!!!')
            console.log(res.target.response)
          })
        })

       
      }) 
    }
    function myPromise(){

    }
    function myAsyncAwait(){

    }
  </script>
</head>
<body>
  <button onclick="myCallback()">Callback 연습하기!!</button>
  <button onclick="myPromise()">Promise 연습하기!!</button>
  <button onclick="myAsyncAwait()">Async-Await 연습하기!!</button>
</body>
</html>

Why Use?

예전엔 async-await이 없었으므로 함수의 결과값을 기다려야할 때나 함수 aaa가 끝나거나 중간에 실행하게 될 함수를 보내줄 때 사용.

promise

    function myPromise(){
      // promise chaining
      // 순서가 뒤죽박죽 섞일 수도 있다.
      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)=> {
            console.log("3번 실행!!")
            const userId = res.data.UserId
            return axios.get(
              `http://koreanjson.com/posts?userId=${userId}`
            )
        })
        .then((res)=> {
          console.log("4번 실행!!")
          console.log(res.data)
        })
      console.log('5번 실행!!') 
    }

AsyncAwait

    async function myAsyncAwait(){
      //await는 프로미스를 지원하는 곳에서만 사용가능!!(.then에서 사용! )
      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
백엔드 주니어 개발자

0개의 댓글