[JavaScript] 비동기적인 쓰기 Promise 편
11188 단어 JavaScript초학자
개시하다
이번 주와 다음 주에 두 차례에 걸쳐 Udemy에서 배운 자바스크립트의 비동기 처리 기법을 발표한다.
이번 주에는 비동기 처리를 할 때 지옥으로 돌아가는 것을 피할 수 있는 프로미스를 썼다.
비동기 처리란?
많은 프로그래밍 언어에서 코드로 평가되는 방법은 동기화 처리(sync)와 비동기화 처리(async) 두 종류로 나뉜다.
※ 병행 처리는 생략합니다.
동기화 처리는 하나의 처리가 끝날 때까지 다음 처리를 하지 않는 순서대로 코드를 처리하는 것이다.
따라서 중간에 무거운 처리가 있으면 대기시간이 많이 걸리고 화면의 조작이 이루어지지 않아 좋지 않은 영향을 미칠 수 있다.
비동기 처리는 순서대로 코드를 처리하지만 비동기 처리가 끝날 때까지 기다리지 않고 다음 처리를 평가한다.
비동기 처리 중 여러 개의 동시 처리가 있다는 것이다.
이번에는 set Time Out을 사용하여 콘솔에 요리법을 출력하는 ID와 레시피를 만드는 사람을 실시한다.
회호지옥은 무엇입니까?
비동기식 프로세싱을 구현할 때 주의해야 할 사항은
여러 데이터를 읽고 읽은 데이터를 처리할 때
아래에 서술한 대로 처리하다.
function getRecipe(){
setTimeout(() => {
const recipeID = [523, 883, 473, 974];
console.log(recipeID)
setTimeout((id) => {
const recipe = {title: 'Udon', publisher: 'Jacob'};
console.log(`${id}:${recipe.title}`);
setTimeout(publisher =>
const recipe = {title: 'Ramen', publisher: 'Tony'}
console.log(recipe)
}, 1500, recipe.publisher)
} ,1500, recipeID[2]);
}, 1500);
}
getRecipe();
이처럼 호출 함수는 연속적으로'호출지옥'이라고 불린다.
상술한 코드는
많은 프로그래밍 언어에서 코드로 평가되는 방법은 동기화 처리(sync)와 비동기화 처리(async) 두 종류로 나뉜다.
※ 병행 처리는 생략합니다.
동기화 처리는 하나의 처리가 끝날 때까지 다음 처리를 하지 않는 순서대로 코드를 처리하는 것이다.
따라서 중간에 무거운 처리가 있으면 대기시간이 많이 걸리고 화면의 조작이 이루어지지 않아 좋지 않은 영향을 미칠 수 있다.
비동기 처리는 순서대로 코드를 처리하지만 비동기 처리가 끝날 때까지 기다리지 않고 다음 처리를 평가한다.
비동기 처리 중 여러 개의 동시 처리가 있다는 것이다.
이번에는 set Time Out을 사용하여 콘솔에 요리법을 출력하는 ID와 레시피를 만드는 사람을 실시한다.
회호지옥은 무엇입니까?
비동기식 프로세싱을 구현할 때 주의해야 할 사항은
여러 데이터를 읽고 읽은 데이터를 처리할 때
아래에 서술한 대로 처리하다.
function getRecipe(){
setTimeout(() => {
const recipeID = [523, 883, 473, 974];
console.log(recipeID)
setTimeout((id) => {
const recipe = {title: 'Udon', publisher: 'Jacob'};
console.log(`${id}:${recipe.title}`);
setTimeout(publisher =>
const recipe = {title: 'Ramen', publisher: 'Tony'}
console.log(recipe)
}, 1500, recipe.publisher)
} ,1500, recipeID[2]);
}, 1500);
}
getRecipe();
이처럼 호출 함수는 연속적으로'호출지옥'이라고 불린다.
상술한 코드는
function getRecipe(){
setTimeout(() => {
const recipeID = [523, 883, 473, 974];
console.log(recipeID)
setTimeout((id) => {
const recipe = {title: 'Udon', publisher: 'Jacob'};
console.log(`${id}:${recipe.title}`);
setTimeout(publisher =>
const recipe = {title: 'Ramen', publisher: 'Tony'}
console.log(recipe)
}, 1500, recipe.publisher)
} ,1500, recipeID[2]);
}, 1500);
}
getRecipe();
深いネストにより可読性が低い
処理の追加/削除が大変
이 호출지옥을 피할 수 있는 건 프로미스야.
Promise 쓰기 사용
const getRelated = publisher =>{
return new Promise((resolve, reject) =>{
setTimeout(pub =>{
const recipe = { title: 'Ramen', publisher: 'Tony' }
resolve(`${pub}: ${recipe.title}`);
}, 2000, publisher);
});
};
const getIDs = new Promise((resolve, reject) =>{
setTimeout(() =>{
resolve([523, 883, 473, 974]);
}, 1500);
});
const getRecipe = recId =>{
return new Promise((resolve, reject) =>{
setTimeout(ID =>{
const recipe = { title: 'Udon', publisher: 'Taro' };
resolve(`${ID}: ${recipe.title}`)
}, 2000, recId);
});
};
getIDs
.then(IDs => {
console.log(IDs);
return getRecipe(IDs[2]);
})
.then(recipe => {
console.log(recipe);
return getRelated('Tony');
})
.then(recipe => {
console.log(recipe);
})
.catch(e => {
console.log(e);
});
결과는 성공과 실패 두 가지로 나뉜다.
성공할 때 매개 변수를 통해 전달되는 함수resolve를 호출이 실패할 때 매개 변수를 통해 전달되는reject로 설명합니다.
(이번에는 Reject 생략)
resolve () 의 값은then () 에서 받을 수 있고, Reject () 의 값은catch () 에서 받을 수 있습니다.
다음 주에는 프로미스보다 더 간결하게 가져오기 위한 async/await 기능입니다.
참고 자료
Udemy: The Complete JavaScript Course 2020: From Zero to Expert! (Lecture No.434)
Reference
이 문제에 관하여([JavaScript] 비동기적인 쓰기 Promise 편), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/t_t238/items/7bcd9aa24e8208a8fc48
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
const getRelated = publisher =>{
return new Promise((resolve, reject) =>{
setTimeout(pub =>{
const recipe = { title: 'Ramen', publisher: 'Tony' }
resolve(`${pub}: ${recipe.title}`);
}, 2000, publisher);
});
};
const getIDs = new Promise((resolve, reject) =>{
setTimeout(() =>{
resolve([523, 883, 473, 974]);
}, 1500);
});
const getRecipe = recId =>{
return new Promise((resolve, reject) =>{
setTimeout(ID =>{
const recipe = { title: 'Udon', publisher: 'Taro' };
resolve(`${ID}: ${recipe.title}`)
}, 2000, recId);
});
};
getIDs
.then(IDs => {
console.log(IDs);
return getRecipe(IDs[2]);
})
.then(recipe => {
console.log(recipe);
return getRelated('Tony');
})
.then(recipe => {
console.log(recipe);
})
.catch(e => {
console.log(e);
});
Udemy: The Complete JavaScript Course 2020: From Zero to Expert! (Lecture No.434)
Reference
이 문제에 관하여([JavaScript] 비동기적인 쓰기 Promise 편), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/t_t238/items/7bcd9aa24e8208a8fc48텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)