반응형
collback
함수, 기능이 종료되는 시점에 실행되는 함수.
그걸 가능하게 하는게 자바스크립트는 함수를 인자로 넘길수 있어서다.
인자로 전달되는 함수를 collback 함수라고 한다.
자바스크립트는 비동기라 앞에 코드가 실행중 일때 끝날때까지 기다리는게 아닌 다음 코드를 실행한다.
그래서 지금 함수결과가 0이고 나중에 실행이 끝난 데이터 호출 결과는 30인거다.
2번 작업이 끝나기 전에 3번을 실행시켰다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>jquery ajax</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
function fetchData(){
// 1.
var result = [];
// 2.
$.ajax({
url: 'https://api.hnpwa.com/v0/news/1.json',
success: function(data){
console.log('데이터 호출 결과', data);
result = data;
}
});
// 3.
console.log('함수 결과', result);
}
// 4. 함수호출
fetchData();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>jquery ajax</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
function fetchData(){
// 1.
var result = [];
// 2.
$.ajax({
url: 'https://api.hnpwa.com/v0/news/1.json',
success: function(data){
console.log('데이터 호출 결과', data);
result = data;
console.log('함수 결과', result);
}
});
// 3.
// console.log('함수 결과', result);
}
fetchData();
</script>
</body>
</html>함수를 계속 인자로 넘기다보면 콜백지옥에 빠진다.
이런 부분 때문에 promise 라는게 등장한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>jquery ajax</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
function callAjax(){
// Promise는 인자로 resolve와 reject를 받는다
// resolve는 성공, reject는 실패
return new Promise(function(resolve, reject){
$.ajax({
url: 'https://api.hnpwa.com/v0/news/1.json',
success: function(data){
resolve(data);
}
});
});
}
function fetchData(){
// 1.
var result = [];
callAjax()
.then(function(data){
console.log('데이터 호출 결과', data);
result = data;
console.log('함수 결과', result);
});
}
fetchData();
</script>
</body>
</html>반응형
'vue.js > vue.js 2' 카테고리의 다른 글
| 59. <vue-news> 프로젝트 | API 데이터 출력하는 순서 | axios 순서 (0) | 2022.08.05 |
|---|---|
| 58. <vue-news> 프로젝트 | Dynamic Route Matching | 동적 라우트 매칭 (0) | 2022.08.05 |
| 56. JavaScript의 this (0) | 2022.08.05 |
| 55. <vue-news> 프로젝트 | axios | .then(성공) | .catch(실패) | API 가져오기 (0) | 2022.08.05 |
| 54. <vue-news> 프로젝트 | router | router-view | router-link (0) | 2022.08.05 |