Promise를 조금이나마 이해할 수 있도록.

JavaScript로 비동기 처리를 수행할 때 통과해야 하는 길...그것은 promise입니다.
최근의 전단 개발은 반드시 비동기 처리와 순조롭게 교류해야 한다
"Promise란 무엇인가...?"이런 사람에게는 이해하기 어렵다promise.
이런 나도 상당히 고전해서 드디어 쓸 수 있는 쪽이라 이해하기 어렵다.
만약 이 보도가 약간의 작용을 할 수 있다면 매우 좋겠다.

이른바 프로미스

프로세스(Promise)는 제작 시 알 수 없는 값에 대한 에이전트입니다.프로세서를 비동기 동작의 성공값이나 실패 원인에 연결할 수 있습니다.따라서 비동기적 방법은 미래의 어느 시점에서 값을 제공하는 과정을 되돌려주고 결과의 값을 되돌려주는 것이 아니라 동기화 방법과 같다.
MDN: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise

가장 중요한 일

Promise는 상태가 있습니다.다음 3가지 유형.

1.pending

초기 상태에서 대기합니다.성공도 실패도 없다.

2.fulfilled

는 처리가 성공했고 완성되었음을 나타낸다.

3.reject

는 처리에 실패했음을 나타낸다.

기본 문법

new Promise((resolve, reject) => {
  // resolve() ...処理が成功した場合
  // reject() ...処理が失敗した場合
});

Promise를 해보도록 하겠습니다.

바로 Promise로 비동기 함수를 만들어 보세요.asyncFunction이라는 함수로 상태resolve를 만들 때 문자열을 되돌려 주는 함수를 만들었습니다.

const asyncFunction = () => {
  return new Promise((resolve) => {
    resolve("async Hello");
  });
};

그러면 이 함수를 이렇게 집행하면 어떻게 될까요?
성공도 실패도 없다.Promiseオブジェクト 반환.

Promise { 'async Hello' }

는 여기서부터 중요하지만 Promise의 결과를 얻기 위해서는 처리 프로그램의 반환 값을 사용해야 한다.
결과resolve를 원하기 때문에 then()로 수치를 되돌려줍니다.

asyncFunction().then((value) => console.log(value));
// 実行結果：　async Hello

이번에는 되돌아오는 버전을 만들어 보려고 합니다.reject의 결과를 값으로 되돌릴 때 reject로 되돌려줍니다.

const asyncFunction = () => {
  return new Promise((resolve, reject) => {
    reject("...reject");
  });
};
asyncFunction().catch((value) => console.log(value));
// 実行結果：　...reject

reject 오류 처리 결과

함수 매개 변수에 수조와 특정 값을 넣고 비동기 함수를 만들어서 수조에 특정 값이 포함되어 있는지 확인합니다.catch() 반환 시 오류 처리를 추가합니다.

const existValue = (array, value) => {
  return new Promise((resolve) => {
    if (array.includes(value)) return resolve(`${value}は配列に含まれています`);
    throw new Error(`${value}は配列に含まれていません`);
  });
};

그런데 왜 안 썼어요reject?reject는 처리 프로그램.then()에 있기 때문에 자동으로 throw로 판단된다.
따라서 명시reject한 경우 다음과 같은 내용을 쓸 수 있으며 뜻이 같다.

existValue([1, 2, 3], 4)
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    if (error instanceof Error) {
      console.log(error.message);
    }
  });
  // 実行結果：　4は配列に含まれていません

어때요? reject 재미있죠?

aysnc / await

이해Promise할 수 있다면 간단히 소개해 드리겠습니다Promise.
이 구절은 최근의 앞머리에도 잘 사용되고 있으니 많은 사람들이 보았을 것이다.async / await 및 async / await 병용
방금'reject 결과 오류 처리'라고 적힌 함수를 고쳐 보세요.
방법 체인 제어의 부분은 promise로 제어한다.
방법체인try ~ catch에서 처리를 기다리는 부분.then()을 이미지로 사용하여 비동기 처리의 실행을 기다립니다.

return reject(new Error(`${value}は配列に含まれていません`));

이기 때문에 await에 대한 설명입니다.Promise 아직 심오하지만 이해가 안 돼서 고민하는 분들을 도울 수 있다면 좋겠어요.