이 글은 일련의 3편 중 2편으로, 자바스크립트에서 비동기식 데이터를 어떻게 사용하는지 설명하고 보여준다.
본고에서 나는 약속과 우리가 그것을 어떻게 사용하는지, 규칙이 무엇인지, 그리고 실천에서 그것을 어떻게 사용하는지 예시를 중점적으로 소개할 것이다.
만약 이 시리즈의 JS Async에 관한 첫 번째 글을 읽지 않으셨다면, 저는 그중에서 리셋과 그 작업 원리를 토론할 것입니다 just access here.

무엇이 약속입니까?

Promises는 로컬 자바스크립트로 비동기 데이터를 더욱 우아하고 간단하게 처리할 수 있습니다.
현실 세계의 약속처럼 자바스크립트의 약속은 일어날 수도 있고 일어나지 않을 수도 있다. 기술적으로 우리는 우리가 처리하고 있는 흐름의 성공 순간과 오류 순간을 컨트롤할 수 있다고 말할 수 있지만'나도 이미 리셋을 처리할 가능성이 있다'고 생각할 수 있다. 그래, 리셋을 사용해서 오류를 처리할 수도 있지만 상상해 보면 작성할 수 있다.당신의 조작을 잘 관리하고, 동시에 더욱 우아하고, 더욱 성명적인 방식으로 잘못을 얻는 것은 약속할 수 있는 조금일 뿐이다.

승낙을 창조하다

약속은 창조와 소비의 두 단계로 나뉜다.기초 지식을 검토하고 새로운 약속을 만들어 봅시다.

const myPromise = new Promise(function (resolve, reject) {
  // do something
  if (true) {
    // ...
    resolve(); // resolving the promise;
  } else {
    reject(); // rejecting the promise;
  }
});

여기에 우리는 새로운 Promise 실례를 만들었는데, 이 함수는 함수를 매개 변수로 받아들인다. 이 함수는 두 가지 방법을 받아들인다. resolve 와 reject, Resolve 방법은 성공값을 포획하고, Reject 방법은 오류를 포획한다. (존재한다면)
5초 안에 가짜 유효 하중을 되돌려주고 약속을 받아주는 새 함수를 만듭니다.

function handlerPromise(resolve, reject) {
  setTimeout(function () {
    let data = { name: "felipe" };
    resolve(data);
  }, 5000);
}

const myPromise = new Promise(handlerPromise);

handlerPromise 함수는 5초 후에 resolve 방법을 호출하여 변수data를 프로미스의 유효 부하로 내보냅니다.

약속을 실천하다

약속의 성공값을 포획하기 위해 .then 방법을 사용합니다. 최대 두 개의 함수를 매개 변수로 사용할 수 있습니다. 첫 번째 함수는resolve 방법으로 내보낸 결과를 포획하고, 두 번째 함수는reject 방법으로 내보낸 오류를 포획합니다.따라서 성공 사례뿐만 아니라 .then 방법도 오류 데이터를 처리할 수 있다.

myPromise.then(
  function (payload) {
    console.log(`My name is ${payload.name}.`);
  },
  function (error) {
    console.log("oooppps, something wrong happen.");
  }
);

오류 사례의 작업 방식을 보기 위해 Resolve 대신 Reject를 호출해서 handlerPromise 함수를 변경하려고 시도합니다.
약속을 실행할 때 오류를 포착하는 또 다른 방법은 .catch 방법을 사용하는데, 이 방법은 매개 변수로 촉발하는 오류를 수신하는 함수를 반대로 받아들인다.

myPromise.catch(function (error) {
  console.log("ooops, something went wrong");
});

공약을 사용할 때 중요하고 실용적인 점은 .then 방법이 어떤 값을 되돌릴 때 이 값도 공약이다. 이것은 여러 개.then를 연결해서 이 값을 파이프로 처리할 수 있다는 것을 의미한다.
이전과 같은 예를 상상해 보십시오. 그러나 현재 실행되는 모든 단계에서 초기 유효 부하를 수정해야 합니다.

myPromise
  .then(function (payload) {
    return { ...payload, age: 22 };
  })
  .then(function (payload) {
    return { ...payload, role: "developer" };
  })
  .then(function (payload) {
    console.log(payload);
    // { name: 'felipe', age: 22, role: 'developer' }
  })
  .catch(function (error) {
    console.log(error);
  });

첫 번째 파이프.then에서age 속성을 추가했고 두 번째 파이프에는 원시 유효 부하 중의role 속성을 추가했으며 세 번째 파이프는 이전 파이프에 따라 변경된 유효 부하를 수신했다.중요한 것은 .then만 return 이후에 계속 흐르고 집행 후.catch만 절차를 끝낸다는 것을 기억해야 한다.
성공과 오류 사례를 처리하는 파이프를 제외하고promises는 오류가 발생한 후에도 함수.finally를 매개 변수로 하여 코드가 중복되거나 실행 함수가 발생하거나 사용자 화면에서 불러오는 이벤트를 삭제하는 것을 피하기 위해 재미있는 상황에서 사용할 수 있다.

myPromise
  .then(...)
  .catch(...)
  .finally(function () {
    // always executed
  })

구도

Promises는 비동기 프로세스를 병행 처리하는 데 도움을 줄 수 있는 두 가지 방법이 있는데 그것이 바로 Promise.all()와 Promise.race()이다.두 방법 모두 일련의 항목을 수신하고 다음과 같이 작동합니다.

약속.all (): 목록에 있는 모든iterables를 완성한 후 결과 그룹을 포함하는 약속을 되돌려줍니다.모든 항목이 거부되거나 실패하면 오류를 되돌려줍니다.

약속.race (): 첫 번째iterable를 해석하거나 거부할 때 약속을 되돌려줍니다.

아래의 예에서 우리는 두 가지 유사한 약속을 사용할 것이다. 하나는 200ms에서 집행하고 다른 하나는 400ms에서 집행하기 때문에 각각'200'과'400'을 가져온다.

const first = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve("200");
  }, 200);
});

const second = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve("400");
  }, 400);
});

어떻게 승낙한 예.모든 ()은(는) 유효합니다.

Promise.all([first, second]).then(function (payload) {
  console.log(payload); // ['200', '400'];
});

어떻게 승낙한 예.race()의 작동 원리는 다음과 같습니다.

Promise.race([first, second]).then(function (payload) {
  console.log(payload); // '200';
});

이런 기능이 있어서 이전에 몇 줄의 코드가 필요했던 일부 관리는 몇 개의 파이프에 봉인할 수 있다.
중요한 것은 자바스크립트 본기에서 이러한 약속을 실현하기 전에 일부 라이브러리, 예를 들어 q.JS와 when.JS는 이미 이런 유사성과 적용성의 개념을 가지고 있다는 것을 기억해야 한다.
읽어 주셔서 감사합니다. 이 시리즈의 다음 글에서, 저는 async/await로 비동기 프로세스를 처리하는 것을 토론할 것입니다.
즐겁게 놀았으면 좋겠어요. 다음에 또 봐요!
🦐