비동기식 프로세싱의 탄생 배경과 Promise 요약

배경.

비동기 처리와 Promise를 배우고 싶어서 출력하면
기사로 써 보았다.
끝까지 읽었으면 좋겠어요.

구상적 독자

신인 엔지니어를 대상으로 하다.
늘 비동기 처리라는 단어의 의미와 인상이 있다고 생각하지만 구체적인 구조, 왜 비동기 통신이 필요한지, 프로미스를 어떻게 사용하는지 이해할 수 없다.

본문

먼저 비동기 처리가 어떻게 발생했는지 설명한다.

1. 비동기 처리의 탄생

원래 JavaScript는 단식 레드로 처리됩니다.
단식홍이 뭐예요?
처리는 단일하게 집행된다.
하나의 처리가 끝난 후에 다음 처리를 실행합니다.
단식홍의 형상도↓

자바스크립트는 단배홍색이기 때문에 오랜 시간이 걸리는 처리(=이하 재처리와 기술)를 수행하면 재처리가 끝난 후 처리되기 때문에 효율이 매우 떨어진다.
비효율적인 처리 문제를 해결하기 위해 비동기적으로 무거운 처리를 하는 방법이 탄생했다.

비동기식 재처리 방법

비동기적으로 재처리를 수행하면 재처리가 완료되기 전에 다른 처리를 수행할 수 있습니다.

무거운 처리가 구체적으로 무엇입니까

다음은 두 가지 예를 소개한다.
이것들은 비동기 처리로 실행된 재처리의 예이다.
・HTTP 통신

fetch('https://jsonplaceholder.typicode.com/users')

스토리지 장치에 데이터를 저장하는 프로세스

localStorage.setItem("key","value");

저장 장치에 저장된 데이터의 처리는 동기화 처리이기 때문에 비동기화 처리를 하려면 비동기화 처리로 전환해야 한다(=Promise화라고 부른다).
Promise화에 관심 있는 사람 여기 있습니다>>사이트 축소판 그림

2. 이른바 프로미스

Promise는 처리 성공 또는 실패 시 값이 결정되지 않은 객체입니다.
기본적으로 Promise는 다음 3개로 구성되어 있습니다.
처리
/처리 성공 시 값
• 처리 실패 시 값

이른바 처리

1. 비동기 처리의 탄생에 대한 무거운 처리(시간이 오래 걸린다).

처리 성공 시 값

Promise의 값이 정상적으로 확정되면 처리가 성공할 것입니다.
성공할 때 실행하고자 하는 처리를then 방법으로 등록할 수 있습니다.

실패한 값 처리

Promise 값이 예상 값인지 확인하지 못하면 처리에 실패합니다.
실패할 때 실행하고자 하는 처리입니다.catch 방법으로 등록합니다.

Promise의 실제 동작

const result = fetch('apiのurl');
console.log(result);

면 콘솔에서promise(pending[待機])을 입력합니다.
fetchapi를 호출할 때, 매우 느린 HTTP 요청의 결과를 기다리지 않고 Promise로 돌아갑니다.
통신이 성공하면 되돌아오는 Promise의 값을 상대방에게 전달하고 다음과 같은 then 방법을 사용합니다.

const result = fetch('apiのurl');
result.then(response => {
  console.log(response); // => 成功の結果がコンソールに表示される
})
console.log(result); // => pending[待機]のpromiseが返ってくる

실패할 때의 수치는 아래catch 방법으로 수신합니다.

const result = fetch('apiのurl');
result.catch(error => {
  console.error(error); // => エラーオブジェクトがコンソールに表示される
})
console.log(result); // => pending[待機]のpromiseが返ってくる

Promise 를 쓰면 뭐가 좋을까요?

예: setTimeout 함수의 일반적인 쓰기

setTimeout(function() {
  console.log('2秒経ったよ');
  setTimeout(function() {
    console.log('1.5秒経ったよ');
    setTimeout(function() {
      console.log('3秒経ったよ');
      setTimeout(function() {
        console.log('1秒経ったよ');
      }, 1000)
    }, 3000)
  }, 1500)
}, 2000)

비동기 처리에 비동기 처리를 삽입하여 순서대로 비동기 처리를 집행한다.
이렇게 되면 너무 깊게 박으면 지옥으로 돌아가는 상태가 된다.
(영어에서도 호출 건강이라고 부른다)
유지도 어려워...
한편, Promise를 사용하면

sleep(2000)
  .then(() => console.log('2秒経ったよ'))
  .then(() => sleep(1500))
  .then(() => console.log('1.5秒経ったよ'));
  .then(() => sleep(3000))
  .then(() => console.log('3秒経ったよ'));
  .then(() => sleep(1000))
  .then(() => console.log('1秒経ったよ'));  

와 끼워넣기가 얕아지고 처리도 추가, 삭제가 용이하다.
이 점을 해낼 수 있는 이유는 then 방법도 우리에게 새로운 프로미스를 돌려주기 때문이다.
상기 코드처럼 then으로 연결된 코드를 then 체인이라고 부른다.

끝맺다

끝까지 읽어주셔서 감사합니다.
만약 무슨 이해하지 못하는 부분, 피드백 등이 있다면 사양하지 말고 평론해 주십시오.

사이트 축소판 그림