초보자를 위한 JavaScript Promise

이 기사를 최대한 활용하려면 동기 및 비동기 프로그래밍에 대한 기본 사항과 가능한 경우 javascript 콜백에 대한 기본 사항을 알고 있어야 합니다.
그러나 나는 당신이 적어도 85%를 이해할 수 있도록 이러한 주제에서 대부분의 내용을 멀리하려고 노력할 것입니다.

약속 이해

친구가 당신에게 금전적 도움을 요청했고 당신이 ATM에서 돈을 꺼낸 후 그에게 약간의 현금을 주겠다고 약속했다고 가정해 봅시다.
--ATM에 가서 카드를 긁어보니 어떤 이유로 계좌가 동결되어 돈을 인출할 수 없습니다.
-- 그런 다음 친구에게 돌아가서 계정이 동결되었기 때문에 돈을 줄 수 없다고 말합니다. 따라서 약속을 어기십시오.

//You have made promise to your friend and you leave for bank
if (everythingGoesWell) {
return theMoney //Promise is fulfilled
}
else {
return "Account_Frozen" //Promise failed
}

Promise는 JavaScript에서 비동기 작업을 처리하는 데 사용됩니다. 실제 출력(위의 예에서는 돈이 필요함)과 출력을 얻을 수 없는 이유(계정 동결)를 연결하는 특수 개체입니다.

약속의 상태

JavaScript 약속은 확정되었거나 보류 중입니다. Promise 생성자를 사용하여 약속을 만들 수 있습니다.

var thePromise = new Promise(executor())

실행자 함수는 약속 생성자의 콜백입니다. resolve 및 reject 두 개의 콜백을 인수로 사용합니다.

약속이 실제로 이행될 때 resolve 콜백이 사용됩니다. 출력 값을 인수로 사용합니다.

약속을 이행할 수 없을 때 reject 콜백이 사용됩니다. 이유를 인수로 사용합니다.

약속을 생성하면 pending 상태로 초기화됩니다. 실행기가 실행되면 상태는 settled 또는 resolved 중 하나가 될 수 있는 rejected로 변경됩니다.

구현: 코드 조각

여기서 문제에 대한 약속을 만들어 봅시다.

var thePromise = new Promise(function(resolve,reject){
// Try to take out money from atm
withdraw(function(error,money) {
// If withdrawal failed, tell why
if (error) reject (error)
// else return the money
else resolve (money)
})
})

콜백과 콜백 지옥에 대한 경험이 없다면 Promise는 정신없는 일이 될 수 있습니다. 하지만 일단 이 개념을 이해하면 되돌릴 수 없습니다!

then 및 catch 절

catch 함수는 약속이 거부될 때 실행되는 약속에 첨부됩니다. reject 메서드를 통해 전송된 오류를 인수로 사용합니다.

then 함수는 약속이 해결될 때 실행되는 약속에 첨부됩니다. resolve 메소드를 통해 전달된 값을 인수로 전달합니다.

finally 절도 있습니다. Promise가 해결되거나 거부되더라도 실행됩니다. 인수가 필요하지 않습니다.

var thePromise = new Promise(function(resolve,reject){
// Try to take out money from atm
withdraw(function(error,money) {
// If withdrawal failed, tell why
if (error) reject (error)
// else return the money
else resolve (money)
})
})

thePromise.then(function(money) {
// This function is executed when the above promise resolves and returns an //amount of money
})

thePromise.catch(function(error) {
// This function is executed when the above promise rejects due to an error
})

thePromise.finally(function() {
// This function is executed after the promise is resolved or rejected.
})

감사합니다! 피드백, 제안 및 수정 사항을 높이 평가합니다. 댓글로 적어주세요 %-)

#webdev 초보자는 여기 내 기사를 통해 웹 개발을 위한 기반을 구축하는 방법을 살펴볼 수 있습니다.

웹 개발 로드맵 - 'The Base-Builder'.

Jaskirat Grewal ・ 2020년 6월 1일 ・ 3분 읽기

#beginners #webdev #node #javascript