node보충
함수의 인자로 함수가 들어가는 경우가 있는데 이때 들어가는 인자를 콜백함수라고 한다.
계속해서 아래의 함수를 호출하므로 오래걸림.
<!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>
예전엔 async-await이 없었으므로 함수의 결과값을 기다려야할 때나 함수 aaa가 끝나거나 중간에 실행하게 될 함수를 보내줄 때 사용.
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번 실행!!')
}
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)
}