약속-JavaScript 개념

이것은 내가 33 JS Concepts 중의 하나하나를 통해 해석하려고 시도한 시리즈의 일부분이다.
이 부분은 약속과 상응한다.

배경.

JavaScript는 단일 스레드 언어로서 한 번에 하나의 작업만 처리할 수 있습니다.
나는 이것이 듣기에 매우 좋다고 믿는다. 걱정할 수 있는 여러 가지 방법이 없다.하지만 우리는 또 다른 것을 기억해야 한다.브라우저에서 항상 실행되는 UI 스레드는 언제든지 응답해야 합니다.JavaScript가 UI 스레드에 집중할 경우 API에서 데이터를 가져오는 사람은 누구입니까?
어떻게 하는지 설명해 드릴게요. 하지만.
따라서 JavaScript는 단일 스레드를 방해하지 않고 일부 컨텐츠를 비동기적으로 처리해야 합니다.API를 호출하시겠습니까?

API 호출

API 호출을 브라우저 스레드에서 완료합니다.

브라우저가 결과를 반환합니다.

처리 결과.

약속은 네 번째 단계를 실현하는 간단한 방법이다. 즉, 한 줄로 되돌아와 주어진 문장의 결과를 처리하는 코드를 작성하는 것이다.

무엇이 약속입니까?

promise는 본질적으로 특수한 대상(함수가 대상인 것처럼)이고 그 위에 then 방법이 있는데 비동기적인 조작이 완성될 때 이 방법을 호출한다.
비록 우리는 자신의 약속을 정의할 수 있지만 대다수 상황에서 우리는 내장 함수나 제3자 라이브러리에서 되돌아오는 약속을 사용할 것이다.우선, 그것이 어떻게 작동하는지 봅시다.

fetch('https://pokeapi.co/api/v2/pokemon/ditto')
  .then(response => console.log(response))
  .catch(error => console.error(error));
console.log('this comes first though');

여기서, 우리는 내장 fetch API를 사용하여PokeAPI를 호출하여 결과를 얻는다.axios나 GraphQL 클라이언트를 사용해도 마찬가지다.
fetch API는 Promise 대상을 되돌려줍니다. 이 대상에서 .then 호출할 수 있고, error 완성될 때 then 전달된 함수를 호출할 수 있으며, 오류가 발생하면 fetch 호출할 수 있습니다.catch 마이크로 대기열에 들어가서 다음 줄을 실행하고, 다른 일이 실행되었을 때 (분명히 추출됨), fetch 또는 then 리셋을 호출할 수 있음을 기억하십시오.

아니오, 약속해요.

그렇다면 우리는 어떻게 약속을 바탕으로 자신의 기능을 만들 수 있을까?

function serveDish() {
  return new Promise(resolve => {
    // An asynchronous function that gives you the dish back with a callback.
    createDish(function(error, dish) {
      if (error) {
        throw error;
      }
      resolve(dish); // completed the operation and resolved the promise.
    });
  });
}

구조기error는 당신이 새로운 약속을 창조하는 것을 돕는다.리콜을 통해 일하는 것을 약속으로 바꾸기를 원한다면, 이렇게 해야 할 수도 있다.비동기적으로 실행할 수 있도록 하나만 만들 뿐입니다.약속에 오류가 발생하면 다른 쪽에서 하나 new Promise 를 던진 다음 하나 Error 를 던질 수 있습니다.
다른 한편:

serveDish()
  .then(dish => console.log("Here's your dish", dish))
  .catch(err => console.error('Things burned because of ', err));

그리고요?

catch 에 리셋을 전달할 수 있습니다. 이 리셋은 then 에서 만든 resolve 응답을 받을 수 있습니다. 보시다시피.

우리 공약 좀 하자.

그러나 Promise의 진정한 약속은 그것을 잠그는 데 있다.

learnCooking()
  .then(recipes => createDish(recipes))
  .then(dish => inviteNeighbours(dish))
  .then(dish => serveDish(dish))
  .then(servedDish => getFeedback(servedDish))
  .catch(err => console.error('Something went wrong! 🔥'));

이것이 바로 약속 체인이다. 당신이 원하는 모든 수량의 약속을 연결할 수 있다. 당신이 이전의 약속에서 한 약속을 되돌리기만 하면.원어가 자동으로 약속으로 바뀌기 때문에 보기보다 쉽다.만약 당신이 어떤 일을 명확하게 약속으로 바꾸고 싶다면, 당신은 다음과 같이 할 수 있다.

Promise.resolve(41);

실천하겠다는 약속이 많다.

지금까지 우리는 약속을 어떻게 처리하고 그 결과를 연결시키는지 보았다.그러나 다른 약속이 있다면 모든 약속이 끝난 후에야 실행할 수 있다면 어떻게 해야 합니까?이곳이 Promises이 작용하는 곳이다.
예를 들면, 너는 식단을 연구하여 여러 가지 요리를 만들었다.

const dishes = ['names', 'of', 'your', 'favorite', 'dishes', 'go', 'here'];

// map returns the promise and forms dishesPromise array
const dishesPromise = dishes.map(dish => createDish(dish));

// You want to wait for all dishes to complete cooking before you invite neighbours
Promise.all(dishesPromise).then(dishes => inviteNeighbours(dishes));

Promise.all는 일련의 약속을 매개 변수로 하고 모든 약속이 완성될 때 약속을 집행한다Promise.all.then콜백의 매개 변수는 모든 약속에서 나온 일련의 결과를 포함한다.then는 가장 자주 사용하는 방법이지만 여러 가지 약속을 처리하고 그에 상응하는 행동을 취하는 데 도움을 줄 수 있는 다른 방법도 있습니다.Find all of them at MDN

메모

본문에서 두 번째 논점Promise.all은 소홀히 되었다.약속이 거절당했을 때, 그것은 결과를 되돌려준다.이런 경우는 드물다. 약속을 거절하고 싶다면, 최종 사용자는catch 블록으로 약속과 then 모든 오류를 연결할 수 있기 때문에 오류를 던지는 것이 좋다.catch에 여러 함수를 추가하는 것은 곤혹스럽다.

Originally written on my blog. Find me on