반응형
1. 이건 일반적인 프로그래밍 패턴
// 1. 데이터를 받아와서 변수에 저장하고
var id = $.get('domain.com/id');
// 2. 저장한 변수를 이용해서 if문 이용
if(id === 'john'){
var products = $.get('domain.com/products');
}
2. 자바스크립트 비동기패턴 때문에 콜백함수로 비동기처리
$.get('domain.com/id', function(id){
if( id === 'john'){
$.get('domain.com/products', function(){
// 항상 받아온 데이터를 콜백함수 안에서
// 처리해야만 비동기처리가 가능했다.
});
}
});
3. promise 등장. 콜백함수 보다 코드의 흐름을 명확하게 알수있다.
function getId(){
return new Promise(function(resolve, reject){
$.get('domain.com/id', function(id){
resolve(id),
})
})
}
function getProduct(){
// ...
}
function logProduct(){
// ...
}
getid()
.then(getProduct)
.then(logProduct)
.catch();
4. Async & Await
- 어싱크 어웨이트는 자바스크립트 비동기 처리 패턴의 최신 문법.
- 위의 3번, 2번 Promise, collback 에서 주는 단점을 해결
- 자바스크립트의 비동기적 사고 방식에서 벗어나 동기적(절차적) 으로 코드 작성 가능
반응형
'vue.js > vue.js 2' 카테고리의 다른 글
69. 기존 비동기패턴 코드에서 async & await 로 바꾼 예 (0) | 2022.08.10 |
---|---|
68. Async & Await | 비동기 처리 패턴의 최신 문법 (0) | 2022.08.10 |
66. <vue-news> 프로젝트 | 2차 완성 (0) | 2022.08.07 |
65. UX를 고려한 데이터 호출 시점 (0) | 2022.08.07 |
64. <vue-news> 프로젝트 | Mixins (여러 컴포넌트 간에 공통으로 사용되고 있는 로직, 기능들을 재사용하는 방법) (0) | 2022.08.07 |