비동기 코드는 JavaScript로 작성하는 데 어려움이 있었습니다. 코드에서 비동기 작업을 작성하려면 여러 수준의 콜백 함수를 처리해야 합니다. 코드에 추가한 기능이 많을수록 읽기가 더 어려워졌습니다.
ES6에서는 약속이 구출되었습니다. Promise는 JavaScript에서 비동기 코드를 효율적으로 작성하는 방법입니다.
이 가이드에서 우리는 약속이 무엇이며 어떻게 작동하는지 이야기할 것입니다. 코드에서 사용하는 방법을 배우는 데 도움이 되는 Promise의 예를 살펴보겠습니다. 시작하겠습니다!
약속이란 무엇입니까?
Promise는 미래에 받고 싶은 응답을 반환하는 객체입니다.
JavaScript 약속에 대해 생각하는 좋은 방법은 사람들이 약속을 하는 방법과 비교하는 것입니다. 약속을 하는 것은 미래에 어떤 일을 하겠다고 약속하는 것입니다. 당신은 지금 그런 일을 하지 않을 것입니다. 당신은 나중에 어떤 시점에서 그것을 할 것입니다.
Promise는 다음 세 가지 상태 중 하나로 존재할 수 있습니다.
- 보류 중:약속이 아직 완료되지 않았습니다.
- 거부됨:약속이 값을 반환하지 못했습니다.
- 이행됨:약속이 완료되었습니다.
이것은 실생활에서의 약속과 유사합니다. 당신은 당신이 미래에 수행할 것이라고 말하는 보류 중인 약속을 가질 수 있습니다. 약속을 지킬 수 있습니다. 당신은 약속을 거부하거나 "파기"할 수 있고, 당신이 하기로 동의한 것을 이행하지 않을 수 있습니다.
약속을 하면 보류됩니다. Promise는 응답이 수신되고 Promise가 이행되거나 거부될 때까지 이 상태로 존재합니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
자바스크립트 약속을 만드는 방법
사용자의 이름을 반환하는 약속을 만드는 것으로 시작하겠습니다. 이 함수는 3초 후에 사용자 이름을 프로그램에 반환합니다. 이것은 프라미스가 비동기 코드를 작성하는 데 어떻게 사용되는지 보는 데 도움이 될 것입니다.
Promise를 생성하려면 Promise 객체를 생성해야 합니다.
new Promise((resolve, reject) => {
// Your code here
});
Promise는 Promise의 성공을 처리하는 함수와 실패한 Promise를 처리하는 함수의 두 가지 인수를 허용합니다. 이것은 우리의 약속이 결과에 따라 다른 값을 반환한다는 것을 의미합니다.
Promise는 Promise가 성공적으로 실행되었는지 여부를 결정하는 "if" 문을 포함해야 합니다. Promise가 성공적으로 실행되지 않으면 거부된 상태 Promise를 반환해야 합니다.
new Promise((resolve, reject) => {
if (value is true) {
resolve();
} else {
reject();
}
});
새 JavaScript 파일을 열고 다음 코드를 복사합니다.
let returnName = new Promise((resolve, reject) => {
let name;
setTimeout(() => {
name = "Cinnamon";
if (name === "Cinnamon") {
resolve(name);
} else {
reject("This promise has failed.");
}
}, 3000);
});
이 코드는 Cinnamon이라는 이름을 반환합니다. 우리가 promise를 호출할 때 우리의 메인 프로그램에. 이 코드는 실행하는 데 3초 또는 3,000밀리초가 걸립니다. 이것은 우리가 우리의 약속을 호출할 때 3초 동안 보류된다는 것을 의미합니다. Promise가 해결된 후 해결되거나 거부된 Promise는 기본 프로그램으로 반환됩니다.
"name"이 "Cinnamon"과 같으면 약속이 성공적으로 해결됩니다. 그렇지 않으면 우리의 약속은 거부될 것입니다. 이 예에서 "name"은 "Cinnamon"으로 설정됩니다. 이름을 지정했기 때문에 우리의 약속은 저절로 해결됩니다.
약속을 사용한 then() 및 catch()
우리 코드는 아직 실행되지 않습니다. 우리는 promise 객체를 호출해야 합니다:
returnName.then(data => {
console.log(data);
});
then() 키워드를 사용하면 약속에서 응답을 검색할 수 있습니다. Promise가 해결된 후에 호출됩니다. 이 예에서는 data의 내용을 출력합니다. , 이는 우리의 약속에서 콘솔로 반환된 응답입니다.
우리 코드는 다음을 반환합니다:Cinnamon.
then() 성공적인 약속만 처리합니다. 우리의 약속이 거부되면 어떻게 됩니까? 바로 catch()입니다. 방식이 들어옵니다.
여러 then() 를 지정할 수 있습니다. 약속 안의 진술. 이를 약속 체인이라고 합니다. 연결이 작동하는 방식을 설명하기 위해 예를 사용하겠습니다.
returnName.then(data => {
console.log(data);
}).then(() => {
console.log("This function is over!");
이 코드는 다음을 반환합니다.
계피
이 기능은 끝났습니다.
then() 문은 약속 생성자 내부에 지정된 순서대로 실행됩니다.
catch() 메소드는 then() 와 같은 프라미스에 첨부됩니다. 방법. 이름 예제에 대해 거부된 약속을 관리하는 핸들러를 만들어 보겠습니다.
returnName.then(data => {
console.log(data);
}).catch(error => {
console.log(error);
});
catch() then() 뒤의 문 성명. 프라미스 코드의 맨 끝에 세미콜론(;)을 사용하는 것을 주목하세요. then() 뒤에 세미콜론을 지정하면 안 됩니다. catch()를 사용하는 경우 메서드 . 그러면 then()과 catch()가 분리되어 코드에 오류가 반환된다는 것을 JavaScript에 알립니다.
약속이 거부되면 catch() 문의 내용이 실행됩니다.
코드를 실행할 때 어떤 일이 발생하는지 봅시다.
시나몬
값 Cinnamon 우리의 약속이 성공적으로 해결되었기 때문에 반환됩니다. "name"의 값이 약속에서 "Cinnamon"이 아니면 오류가 반환됩니다.
잡히지 않음(약속 중) 이 약속은 실패했습니다.
"이 약속은 실패했습니다."라는 오류 메시지를 지정했습니다. 프라미스 안의 reject() 함수에서.
finally()와 약속
Promise의 성공 여부와 상관없이 Promise가 실행된 후 코드 블록을 실행하려면 어떻게 됩니까?
finally() 진술이 유용합니다. finally() 문은 약속이 이행되거나 거부되는지 여부에 관계없이 실행됩니다. finally 문을 사용하도록 promise 호출을 업데이트해 보겠습니다.
returnName.then(data => {
console.log(data);
}).catch(error => {
console.log(error);
}).finally(() => {
console.log("The returnName promise has been executed.");
});
코드는 다음을 반환합니다.
계피
returnName 약속이 실행되었습니다.
우리의 약속은 Cinnamon을 반환합니다. 성공했기 때문입니다. finally()의 내용 그런 다음 명령문이 실행되어 콘솔에 다른 메시지가 반환됩니다.
결론
JavaScript 약속을 사용하면 깨끗한 비동기 코드를 작성할 수 있습니다.
이 가이드에서는 약속의 기본 사항을 다뤘습니다. 이 가이드에서 다룬 것보다 더 많은 약속이 있습니다. 학습 여정의 다음 단계는 코드에 몇 가지 약속을 작성하는 것입니다.
여기에 도전 과제가 있습니다. 웹 요청을 만들고 응답을 반환하는 약속을 작성하십시오. 이렇게 하려면 fetch() API를 사용하여 요청해야 합니다. 이 요청은 약속 안에 포함되어야 합니다. 성공 여부에 관계없이 약속을 처리하는 코드를 작성해야 합니다.
더 나아가려면 JavaScript 비동기 함수를 확인하십시오. 이것들은 비동기 코드를 작성하는 데 사용할 수 있으며 일반적으로 Promises와 함께 사용됩니다.
이제 전문가처럼 JavaScript Promise를 작성할 준비가 되었습니다!