자바스크립트 약속

장기 실행 작업을 처리하는 방법

오래 실행되는 프로세스가 인터페이스를 잠글 수 있음을 확인했습니다.

예를 들어 원격 API에서 데이터를 검색해야 하는 함수를 호출할 수 있습니다. API가 데이터를 반환하는 속도가 느린 경우 모든 데이터가 수신되거나 오류가 생성될 때까지 다음 작업을 계속할 수 없는 상태에서 응용 프로그램에 갇힐 수 있습니다. 이것은 나쁜 사용자 경험을 만듭니다.

이 문제를 해결하는 한 가지 방법은 장기 실행 프로세스를 관리해야 할 때 콜백 함수를 사용하는 것입니다.
또 다른 대중적인 방법은 Promise를 사용하는 것입니다.

약속

Javascript Promise는 장기 실행 비동기 작업을 수행하고 이 작업이 성공한 경우 결과를 반환하고 그렇지 않은 경우 오류를 반환하는 개체입니다.

아래 코드를 살펴보겠습니다. Promise 객체를 설정하고 반환하는 ~라는 함수를 정의했습니다.
Promise 객체는 resolve 및 reject 두 개의 인수를 취하는 화살표 함수를 사용합니다.

Promise 내부에서 isGood 매개변수가 true 인지 확인합니다.
그렇다면 Promise가 성공하면resolve 좋은 메시지를 출력한다고 합니다.isGood가 참이 아니면 약속이 실패하고 reject가 대신 호출되며 반환된 메시지는 잘못된 메시지입니다.

function makePromise(isGood) {
  return new Promise((resolve, reject) => {
    if (isGood) {
      resolve('all good');
    } else {
      reject('all bad');
    }
  });
}

let p = makePromise(true);

console.log(p); // all good

makePromise() 를 호출하면 true 객체를 전달합니다. 이렇게 하면 약속이 해결되고 문자열'all good'이 반환됩니다.makePromise()에 전달된 값이 false인 경우 약속이 해결되지 않고 'all bad' 메시지가 출력됩니다.

Promise가 해결되지도 거부되지도 않은 경우 Promise는 보류 상태가 될 수 있습니다.

보류 중인 약속

다음 코드에서는 새 Promise를 만들고 빈 익명 함수를 인수로 전달합니다. 이 빈 함수는 resolve 또는 reject 를 호출하지 않았으므로 Promise는 이제 보류 상태입니다.
콘솔에 출력하면 보류 중인 것을 볼 수 있습니다.

console.log(new Promise(() => {}));
// Promise { <pending> }

약속이 아직 해결되지 않은 경우 보류 상태에 있습니다. 외부 API 호출을 하고 호출을 해결하는 데 시간이 걸리는 경우 실제로 발생할 수 있습니다.

Promise에서 값을 가져오는 방법

우리는 .then() 및 .catch() 의 약속에서 값을 얻습니다.
Promise 끝에 이 메서드를 첨부합니다.
Promise가 해결되면 결과는 .then() 내부에서 사용할 수 있습니다. 그렇지 않으면 .catch() 메서드에서 결과를 사용할 수 있습니다.

이 두 가지 방법을 차례로 연결하면 두 출력을 모두 처리할 수 있습니다. 예를 들면 다음과 같습니다.

p = makePromise(true);
console.log(p); // Promise { 'all good' }

p = makePromise(false);
console.log(p); // Promise { <rejected> 'all bad' }

p
  .then(goodValue => console.log(goodValue)) // all good
  .catch(badValue => console.log(badValue))  // all bad

Promise를 작성할 때 .then()와 .catch()를 다른 줄로 구분하면 가독성을 높일 수 있습니다.

첫 번째.then()의 결과를 추가로 처리해야 하는 경우 여러 메서드.then()를 연결할 수도 있습니다. 첫 번째.then()의 결과는 다음.then() 메서드로 전달됩니다.

React의 외부 API에서 데이터를 검색하는 것에 대해 이야기할 때 더 많은 Promise를 보게 될 것입니다.


나는 웹 개발에 대해 매일 씁니다. 이 기사가 마음에 들면 친구 및 동료와 자유롭게 공유하십시오.

subscribing to my newsletter 까지 수신함에서 이와 같은 기사를 수신할 수 있습니다.