답전과 약속, 간단한 설명

Cover Image Credit

답전

// caller
function foo(callback) {
  callback('world');
}

// callback function
function myCallback(name) {
  console.log(`Hello ${name}`); // "hello world"
}

// pass callback to caller
foo(myCallback);

리셋을 이해하려면 먼저 NodeJS 코드를 어떻게 운행하는지 알아야 한다.NodeJS의 모든 것은'사건 순환'에 의해 제어된다. 왜냐하면 그 핵심에서 NodeJS는 단일하고 거대하며 매우 복잡한 순환이기 때문이다.
NodeJS에서 코드를 실행하는 경우 각 행은 기본 V8(JavaScript 엔진)에 의해 설명됩니다.수학과 문자열 같은 기본적인 언어 작업은 호출자에게 결과를 즉시 되돌려줍니다.그러나 네트워크 요청, 파일 읽기, 시스템 하드웨어 액세스 등 다른 작업은 즉시 실행되지 않고 이벤트 순환의 '호출 창고' 에 추가됩니다.이벤트가 순환된 후 들어오는 순서대로 사용 가능한 작업을 계속 수행합니다.만약 작업이 이벤트 순환을 강제로 하여 다른 이벤트 순환 요소를 처리하기 전에 계산을 완성하면, 우리는 이벤트 순환을 막는다고 부른다.또한 완료될 때까지 차단된 작업 유형을 동기화 작업이라고 합니다.

This is an amazing article if you want to learn more about the event loop. Seriously, it's great!

이벤트 순환에 등록할 수 있는 또 다른 종류의 작업이 있습니다. 즉, 비동기 작업입니다.예상한 바와 같이, 비동기 작업은 동기화 작업과 반대로 이벤트 순환을 막지 않습니다.반대로 비동기 작업은 비동기 이벤트가 끝난 후의 모든 결과를 처리하는 '리셋' 함수를 제공해야 한다.이것은 리셋이 무엇인지 설명하는데, 왜 리셋이 필요합니까?

왜 전화를 해요?

만약에 사이트가 브라우저에 모든 자산을 하나씩 불러와야 하고 모든 자산을 검색하기 전에 렌더링을 할 수 없다고 상상해 보세요.만약 그렇다면, Gmail은 30여 초가 걸려야 내 컴퓨터에 나타날 수 있다.리셋은 적은 CPU를 사용하는 작업을 다른 작업을 막지 않고 장시간 실행할 수 있도록 함으로써 이 문제를 해결한다.두 가지 일이 동시에 일어나지 않기 때문에 이것은 병행성이 아니라는 것을 명확히 해야 한다.

Source
대부분의 핵심 NodeJS API(예: filesystem는 이벤트 순환의 장애를 최소화하기 위해 비동기적으로 이루어진다.만약 아직 잘 모른다면, 나는 네가 리셋을 필요로 할 때 가장 좋은 개괄적인 방법은 다음과 같다는 것을 발견했다.
만약 코드가 다른 시스템과 상호작용을 하고 이 시스템이 신뢰성을 확보하지 못한다면 (파일 시스템, 네트워크, gpu) 리셋이 필요할 수도 있다.
예를 들어, stripe에 POST 요청을 보내는 경우com, 너는 그것의 속도가 얼마나 빠른지 보장할 수 없다.com이 응답할 것입니다.이러한 신뢰성을 처리하기 위해서, POST 요청을 비막힘으로 보내고, 리셋을 등록합니다. 리셋이 삭제될 때 리셋을 호출합니다.com 서버 응답.그 스트라이프 때문에com 요청은 비동기적입니다. AWS S3 서비스 (예:) 에 병렬 (비 병렬) 요청을 보내고, 프로그램 불러오는 시간에 대량의 데이터를 삭제할 수 있습니다.

왜 리셋이 안 돼?

Source
시간의 추이에 따라 사람들은 답전에 대해 낙담하기 시작했다.이론적으로 리셋은 코드 실행을 지연시키는 좋은 해결 방안이다.불행하게도, Real use는 플러그인 이벤트를 처리하기 위해 심층 컴파일링을 권장합니다. (다른 비동기 이벤트에서 발생하는 비동기 이벤트)

Obviously you don't need callbacks for something like string manipulation. This is just a contrived example to keep things clean and simple.

// caller
function foo(callback) {
  callback('world', myNestedCallback);
}

// inner inner callback
function myNestedNestedCallback(name, callback) {
  console.log(`Hello ${name}`);
  // Prints "Hello First Name: Mr. world"
}

// inner callback
function myNestedCallback(name, callback) {
  callback(`First Name: ${name}`);
}

// callback function
function myCallback(name, callback) {
  callback(`Mr. ${name}`, myNestedNestedCallback);
}

// pass callback to caller
foo(myCallback);

많은 리셋에 끼워 넣을 때 코드가 얼마나 혼란스러워질지 '리셋 지옥' 이라고 불린다.현재 범위와 사용 가능한 변수를 확정하는 것은 일반적으로 매우 어렵다.

Image Source
여러 개의 내용을 불러오고 처리 순서에 관심이 없을 때, 리셋은 가능하지만, 질서정연한 순서 코드를 작성해야 할 때 리셋은 좋지 않습니다.대다수 상황에서 사람들은 심층 리셋 체인을 인공 순서 코드로 사용한다.이벤트 순환을 막지 않는 해결 방안이 필요하지만, 극단적으로 끼워 넣지 않은 상태에서 코드를 정렬할 수 있습니다.

언약

네가 무엇을 들었든지 간에 aPromise는 정말 화사한 멜로디일 뿐이다.그것은 실제적으로 양호한 API를 정의하는 리셋 함수를 가진 패키지이다.Promise API를 사용하면 기본 비동기 이벤트의 상태를 조회할 수 있으며, 기본 비동기 이벤트에서 생성된 결과나 오류를 처리하기 위해 논리를 등록할 수 있습니다.Promises는 코드를 다음과 같이 변환하기 때문에 주로 중첩 문제를 해결합니다.

// caller
function foo(callback) {
  callback('world', myNestedCallback);
}

// inner inner callback
function myNestedNestedCallback(name, callback) {
  console.log(`Hello ${name}`);
  // Prints "Hello First Name: Mr. world"
}

// inner callback
function myNestedCallback(name, callback) {
  callback(`First Name: ${name}`);
}

// callback function
function myCallback(name, callback) {
  callback(`Mr. ${name}`, myNestedNestedCallback);
}

// pass callback to caller
foo(myCallback);

이에 대해 다음을 수행합니다.

function myNestedNestedCallback(name) {
  return new Promise((resolve, reject) => {
    console.log(`Hello ${name}`); // Prints "Hello First Name: Mr. world"
  })
}

function myNestedCallback(name) {
  return new Promise((resolve, reject) => {
    resolve(`First Name: ${name}`);
  });
}


function myCallback(name) {
  return new Promise((resolve, reject) => {
    resolve(`Mr. ${name}`);
  });
}

myCallback('world').then(myNestedCallback).then(myNestedNestedCallback);

현재 콜백을 사용하는 코드를 약속된 등효 코드로 변환하려면 다음 사항을 참조하십시오.

// callback way
function addCallback(a, b, callback) {
  callback(a + b);
}

// promise way
function addPromise(a, b) {
  return new Promise((resolve, reject) => {
    resolve(a + b);
  });
}

콜백 기반 API와 상호 작용하고 있으며 이를 외부 약속으로 변환하려는 경우

// signature
function makeHTTPRequest(url, method, callback) {}


const convertedToPromise = new Promise((resolve, reject) => {
  makeHTTPRequest('google.com', 'GET', (body, err) => {
    if (err) {
      return reject(err);
    }
    return resolve(body);
  });
});

convertedToPromise.then((res) => console.log(res)); // prints response from google.com

많은 메타데이터도 util package in NodeJS를 통해 자동으로'promisified'버전으로 변환할 수 있다.

const { promisify } = require('util');

function addCallback(a, b, callback) {
  callback(a + b);
}

const asyncAdd = promisify(addCallback);
asyncAdd(3, 6).then((res) => console.log(res)); // "9"

비동기 대기

마지막으로 우리는 async과await가 있다.약속과 리셋 사이의 관계는 유사한데async와await는 사실상 약속의 한 방식일 뿐이다.async와 await는 본 기기의 동기화 코드와 유사한 약속 코드를 작성하는 문법을 제공하는데, 이것은 보통 읽을 수 있고 유지보수성이 높은 자바스크립트 코드를 만들어 낸다.함수에 async 표지부를 사용할 때 다음과 같은 약속 코드에 해당한다.

// async version
async function add(a, b) {
  return a + b; // really returns a Promise under the hood
}

// equivalent code but promise way
function addPromise(a, b) {
  return new Promise((resolve, reject) => {
    resolve(a + b);
  });
}

add(1, 2).then((res) => console.log(res)); // "3"
addPromise(1, 2).then((res) => console.log(res)); // "3"

실제로 모든 async 함수는 완전한 Promise 대상을 되돌려줍니다.await는 async 방법에 부가 기능을 제공했다.비동기 함수를 호출하기 전에wait를 사용할 때, 이것은 코드가 비동기 결과를 표현식의 왼쪽으로 직접 되돌려야 한다는 것을 의미하며, 현식 비동기 작업을 사용하지 않는다는 것을 의미한다.이것은 질서정연한 동기화 스타일 코드를 작성하고 비동기적인 평가의 모든 장점을 얻을 수 있도록 합니다.만약 그것이 여전히 의미가 없다면, 다음은 await 약속한 등가물이다.

async function add(a, b) {
  return a + b;
}

async function main() {
  const sum = await add(6, 4);
  console.log(sum); // "10" 
}

기억 await 은 .then() 에 대한 공격일 뿐, 코드가 끼워 넣지 않은 상태에서 양식화될 수 있도록 허용한다.위의 코드와 아래의 코드는 기능상의 차이가 없다.

function addPromise(a, b) {
  return new Promise((resolve, reject) => {
    resolve(a + b);
  });
}

addPromise(6, 4).then((res => console.log(res))); // "10"

결론

나는 이것이 여전히 리콜과 약속의 핵심 메커니즘을 이해하려고 노력하는 사람들을 도울 수 있기를 바란다.대부분의 경우, 이것은 문법상의 당분일 뿐, 그리 복잡하지는 않다.
만약 네가 여전히 몇 가지 기본 개념을 위해 발버둥치고 있다면, 예를 들면.
My blog