약속 정리( 상태, 생산자, 소비자(그럼 드디어 잡는다), 약속 체이닝, 오류 처리 )
약속이란 무엇입니까?
1. Promise는 비동기 작업을 위한 Javascript 개체입니다.
2. Promise는 State라는 status 값을 가지며 Promise 생성 부분과 사용 부분으로 나눌 수 있습니다.
3. 비동기 처리 동작은 기본적으로 콜백과 동일하나 단점(콜백 지옥)이 추가된다.
1) 조건
상태: 보류 중 -> 만족 또는 거부됨(대기 중 -> 만족 또는 거부됨)
보류 상태 = 값을 아직 알 수 없는 경우(데이터가 제대로 매핑되지 않은 경우 등)
이행 상태 = 반환 값이 할당된 시기를 나타냅니다.
거부됨 상태 = 다음과 같은 오류가 발생한 경우를 나타냅니다. B. 네트워크 오류가 발생합니다.
2) 생산자, 소비자 (생산자 대 사용자) 아래를 참조하십시오.
하나. 제조업체(제조사)
새로운 약속이 만들어지면 집행자(아티스트) 자동으로 실행
성공으로 달리는 집행자 실패할 때 실행되는 Resolve 및 Reject가 있습니다.
해상도가 실행 중일 때
const promise = new Promise((resolve, reject) => {
// 네트워크를 통한 데이터 수신, 파일 읽기와 같은 시간이 걸리는 일을 수행한다.
console.log('doing something...');
setTimeout(() => {
resolve('success'); // 성공 시 호출
}, 2000);
});
promise.then((value) => {
console.log(value);
})2초 후 Promise가 성공하면 호출되는 resolve가 실행됩니다.
출력값
success
거부가 실행될 때
const promise = new Promise((resolve, reject) => {
// 네트워크를 통한 데이터 수신, 파일 읽기와 같은 시간이 걸리는 일을 수행한다.
console.log('doing something...');
setTimeout(() => {
reject(new Error('no network')); // 실패 시 호출
}, 2000);
});
promise.then((value) => {
console.log(value);
})2초 후에 Promise가 실패하면 호출되는 Reject가 실행됩니다.
출력값
– 오류 발생 시 예외처리를 하지 않기 때문에 오류창이 출력됩니다.
2. 컨슈머(user): 그럼, 드디어 잡아
promise
.then((value) => {
console.log(value);
})
.catch(error => {
console.log(error);
})
.finally(() => { console.log('finally'); });그 다음에()Promise는 정상적으로 실행되며 resolve라는 콜백 함수가 전달한 값이 value의 매개변수로 전달됩니다.
잡다()실패하고 “resolve” 대신 “reject”가 호출되는 경우 사용됩니다. (오류 처리 방법)
마지막으로()성공 여부와 상관없이 실행되는 함수입니다.
출력값
// 성공시
"success"
"finally"
// 실패시
no networkError
"finally"
3. 약속 연결
const fetchNumber = new Promise(resolve, reject) => {
setTimeout(() => resolve(1), 1000);
});
fetchNumber
.then(num => num * 2)
.then(num => num * 3)
.then(num => {
return new Promise(resolve, reject) => {
setTimeout(() => resolve(num - 1), 1000);
});
})
.then(num => console.log(num));위의 코드는 2초 후에 5를 반환합니다.
then()은 값이나 약속을 직접 전달할 수 있습니다.
4. 오류 처리
const getA = () =>
new Promise((resolve, reject) =>
{setTimeout(() => resolve(`A`), 1000)
});
const getB = A =>
new Promise((resolve, reject) =>
{setTimeout(() => resolve(`${A} => B`), 1000)
});
const getC = B =>
new Promise((resolve, reject) =>
{setTimeout(() => resolve(`${B} => C`), 1000)
});위와 같은 코드가 있습니다.
다음 두 코드는 동일하게 작동합니다.
getA()
.then(A => getB(A))
.then(B => getC(B))
.then(ABC => console.log(ABC));
getA() //
.then(getB)
.then(getC)
.then(console.log);하나의 값만 전달되고 수신되는 경우 위의 코드와 같이 생략할 수 있습니다.
// 두 번째 getA()에 주석이 없으면 pretty에서 한 줄로 변환됩니다.
아래는 오류 처리 방법입니다.
// getB에서 Error가 발생되었을 때
const getB = A =>
new Promise((resolve, reject) =>
{setTimeout(() => reject(new Error(`error! ${A} => B`)), 1000)
});
getA() //
.then(getB)
.catch(error => {
return 'b';
})
.then(getC)
.then(console.log)
.catch(console.log);위의 코드에서와 같이 then() 중간에 .catch()를 사용하여 자세한 오류 처리가 가능합니다.
Promise 사용시 주의사항
1. Promise는 선언 시점에 값을 요청하고 받기 때문에 사용하지 않는 값을 가져올 수 있습니다.
2. Cunsumer의 요구 사항에 따라 netNetworkConnect를 가져와야 합니다.
3. 아무도 묻지 않고 의사소통을 계속하도록 허용하면 자원을 낭비할 수 있습니다.