(TIL) 230320- JavaScript 제어 흐름, 약속

by

JavaScript 제어 흐름

  • JavaScript는 다른 다중 스레드 프로그래밍 언어(Java, C++…)와 다르게 비동기 작업을 처리합니다.
  • 그것은 주요 가닥으로 구성됩니다.
  • 메인 스레드는 코드를 읽고 한 줄씩 실행합니다.
  • 메인 스레드: 브라우저 환경에서 사용자 이벤트를 처리하고 화면을 그립니다. (브라우저 렌더링, JavaScript 실행)

동기 제어 흐름

  • 즉, 현재 실행 중인 코드가 완료될 때까지 다음 코드 줄이 실행되지 않습니다.
  • 분기문, 루프문, 함수 호출 등은 동기적으로 실행됩니다.
  • 코드 흐름과 실제 제어 흐름은 동일합니다.
  • 단일 스레드 환경에서 메인 스레드가 오랫동안 사용 중이면 프로그램이 중지됩니다.

비동기 제어 흐름

  • 즉, 현재 실행 중인 코드가 끝나기 전에 다음 코드 줄이 실행됩니다.
  • 약속, 콜백 함수를 호출하는 함수 등은 비동기적으로 실행됩니다.
  • 코드 흐름과 실제 제어 흐름은 다릅니다.
  • 비동기 작업을 기다리는 동안 메인 스레드는 다른 작업을 처리합니다.

이벤트 루프

자바스크립트 비동기

  • JavaScript 엔진은 비동기 처리를 제공하지 않습니다.
  • 대신 고정 함수(API)를 제공하여 비동기 코드를 사용할 수 있습니다(예: setTimeout, XMLHttpRequest, fetch 웹 API 등)
  • node.js의 경우 파일 처리 API, 암호화 API 등을 제공합니다.
  • Main Thread: 호출 스택을 기반으로 작동합니다.
  • 비동기 환경에는 작업 대기열과 작업 대기열이 있습니다.

비동기 처리 모델

  • 비동기 코드를 처리하는 모듈은 JavaScript 엔진 외부에 있습니다.
  • 이벤트 루프, 작업 큐, 작업 큐 등으로 구성됩니다.
  • API 모듈은 비동기 요청을 처리하고 태스크 큐에 콜백 함수를 넣습니다.
  • 호출 스택이 비어 있으면 JavaScript 엔진이 작업 대기열 콜백 함수를 실행합니다.

약속하다

  • 비동기 작업을 나타내는 JavaScript 객체
  • 비동기 작업의 진행률, 성공 및 실패 상태를 나타냅니다.
    • pending(진행), 성공(fulfilled, resolved), 실패(rejected)
    • 성공 사례 .then() 달리다, 실패하다 .catch() 실행
  • 비동기 처리의 순서를 표현할 수 있습니다.

약속 API

  • 비동기 API 중 하나
  • 작업 대기열 없음 Job queue(또는 마이크로태스크 대기열).
  • 우선 순위: 작업 대기열 > 작업 대기열

생성자를 약속한 다음 catch

let promise = new Promise((resolve, reject) => {
  if(Math.random() < 0.5) {
    return reject('실패');
  }
  resolve(10)
});
  • 새로운 약속(리콜)
  • 콜백 함수입니다 resolve, reject 두 가지 인수를 허용합니다.
  • 성공 시 호출 해결, 실패 시 호출 거부
promise
    .then(data => {
          console.log("성공", data);
    })
    .catch(e => {
          console.log("실패", e);
    })
    .finally(()=> (
          console.log("promise종료")
      });
  • final() : 성공/실패 상관없이 모두 실행
  • then(callback1, callback2)을 사용하면 성공 및 실패 메서드를 인수로 전달할 수 있습니다.
promise
    .then(data => {
          return fetchUser(data);
    })
    .then(user => {
          console.log("User:", user);
    })
    .catch(e => (
          console.log("실패", e);
      });
  • then/catch 메서드는 비동기 코드를 주문하는 또 다른 약속을 반환합니다.
  • 동일한 객체에 메서드 연결: chain
  • 함수가 완료된 후 함수를 호출한 주체가 자신에게 반환되도록 하여 구현됩니다.

약속, 해결, 약속, 거절

  • Promise.resolve 이 함수는 성공적인 약속을 즉시 반환합니다.
  • Promise.reject: 실패한 Promise를 즉시 반환
  • 메서드 체인을 인위적으로 만들 수 있습니다.
  • 비동기 코드로 진행해야 하는 상황에 유용합니다.

약속.모두

Promise.all((
  promise1,
  promise2,
  promise3
))
  .then(values => {console.log("모두 성공",values); })
  .catch(e => { console.log("하나라도 실패", e); })
  • Promise의 배열을 받아 모두 성공하면 각 약속의 해결된 값을 배열로 반환합니다.
  • 실패하면 먼저 실패한 약속의 실패 이유를 반환합니다.
  • 모두 성공하거나 하나가 실패할 때까지 기다리십시오.
'추천 관련글,