Promise
자바스크립트 비동기 처리에 사용되는 객체
비동기 처리란 '특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성'을 의미
→ 데이터를 다 받아오기도 전에 데이터를 표시하려는 동작이 실행되어 오류가 발생하거나 빈 데이터를 출력하는 문제점을 해결하기 위한 방법 중 하나가 Promise이다.
new Promise()
const promise = () => {
return new Promise((resolve, reject) => {
// executor 실행될 내용
}
}new Promise에 전달되는 함수는 executor(실행자, 실행 함수)라고 부른다.
executor는 new Promise가 만들어질 때 자동으로 실행되는데, 인수 resolve와 reject는 자바스크립트가 자체적으로 제공하는 콜백이다. executor에서 상황에 따라 인수로 넘겨준 콜백 중 하나를 반드시 호출해야 한다.
resolve(value): 일이 성공적으로 끝난 경우 그 결과를 value와 함께 호출reject(error): 에러 발생 시 에러 객체를 나타내는 error와 함께 호출
처리가 끝나면 executor는 처리 성공 여부에 따라 resolve나 reject를 호출한다.
resolve가 호출되고 결과가 만들어지면 promise 객체의 상태가 fulfilled로 변한다.
reject가 호출되면 promise 객체의 상태가 rejected로 변한다.
then
.then의 첫 번째 인수는 promise가 resolve 되었을 때 실행되는 함수이고, 여기서 실행 결과를 받는다.
.then의 두 번째 인수는 promise가 rejected 되었을 때 실행되는 함수이고, 여기서 에러를 받는다.
let promise = new Promise(function(resolve, reject) {
setTimeout(() => resolve("done"), 1000);
});
promise.then(
result => alert(result), // 실행
error => alert(error) // 실행되지 않음
);resolve의 경우 첫 번째 인수 메서드 실행
let promise = new Promise(function(resolve, reject) {
setTimeout(() => reject(new Error("error")), 1000);
});
promise.then(
result => alert(result), // 실행되지 않음
error => alert(error) // 실행
);reject의 경우 두 번째 인수 메서드 실행
작업이 성공적으로 처리된 경우만 다루고 싶다면, .then에 인수를 하나만 전달한다.
catch
에러가 발생한 경우만 다루고 싶다면 .catch를 사용한다.
let promise = new Promise((resolve, reject) => {
setTimeout(() => reject(new Error("error")), 1000);
});
promise.catch(alert); // Error을 catch해 "error" 출력
.catch는.then에null을 전달하는 것과 동일하게 동작한다.
ex).then(null, function)
finally
finally 함수에는 인수가 없다. promise가 resolve 되었는지 reject 되었는지 알 수 없어 절차를 마무리하는 보편적 동작을 수행하기 위해 사용된다.
new Promise((resolve, reject) => {
setTimeout(() => resolve("결과"), 2000)
})
.finally(() => alert("promise status: ready"))
.then(result => alert(result)); // <-- .then에서 result를 다룰 수 있음 (.catch도 가능)finally는 promise 결과를 처리하기 위해 만들어진 것이 아니다.
promise 결과는 finally를 통과해서 전달되어 .finally 이후에도 .then과 .catch를 사용할 수 있다.
참고 출처 : https://ko.javascript.info/async
