Javascript에서 볼 수 있는 것과 약속할 수 있는 네 가지 차이

Javascript는 일종의 단일 루틴 언어로 본질적으로 막힌다.그럼에도 불구하고, 우리는 더 이상의 코드 실행을 막지 않고, 비동기적으로 실행할 수 있다.비동기식으로 말하자면 여러 가지 방식으로 비동기 조작을 실행할 수 있다.나는 주로 관찰과 약속을 사용한다.async/await가 있지만, 그것은 약속이 아니라 문법상의 당분일 뿐이다.
약속과 관찰 가능한 사이의 차이는 내가 가장 좋아하는 면접 문제 중의 하나이다.이 문제는 그들의 기술 능력을 드러내지는 않지만, 그들이 JS와 도구에 대한 가설을 나타낼 수도 있다.그럼 뭐가 달라요?

빈도
관측 가능한 데이터는 데이터 흐름이나 이벤트 흐름으로 시간에 따라 여러 개의 값을 촉발할 수 있다.다음 코드는 초당 무기한 활성화됩니다.

import { Observable } from 'rxjs';

const greeting$ = new Observable(observer => {
    const clear = setInterval(() => {
        observer.next('Hello, there');
    }, 1000);
    // Need to handle the interval here, otherwise you'll end up in a infinitely firing observable.
});

greeting$.subscribe(res => {
    console.log(res);
})

약속은 단일한 사건이다.일단 해결되면 약속은 실현된다.HTTP 호출 결과와 같은 일회성 이벤트에 가장 적합합니다.

const greet = new Promise((resolve, reject) => {
   resolve('Hello, there');
});
greet.then(success => {
    console.log(success);
});

Ironically, the Angular team decided to use observables for their HTTP library HTTPClient, for good reasons. This is a great architectural decision that is further explained by the other reasons in this post. In short, observables give better control on execution and manipulating results than promises.

취소
관측치는 취소할 수 있고 multiple ways개는 취소할 수 있다.취소를 통해 현재 진행 중인 호출과 관측할 수 있는 추가 발사는 모두 무시될 것이다.실제로 observable는 사용자 이벤트, HTTP 요청과 약속 등 많은 것을 포장할 수 있다.당신이 전화한 후에 이 모든 것을 취소하거나 취소할 수 있는 것은 아니다.어쨌든, 일단 관찰할 수 있는 결과를 취소하면, 진일보한 결과는 무시될 것이다.
하지만 일단 그들에게 전화를 하면 약속을 취소할 수 없다.약속을 취소할 수 있는 지원aresome이 있습니다.그러나 ES6는 취소를 지원하지 않겠다고 약속했다.약속한 리셋은 브라우저의 이벤트가 순환적으로 처리됩니다.그래서 일단 그것이 호출되면 너는 아무것도 할 수 없다.
libraries
비동기적
설령 그것이 즉각 해결된다 하더라도 약속은 항상 비동기적이다.이유를 이해하려면 Javascript의 이벤트 순환을 이해해야 합니다.

무엇이 사건 순환입니까?
만약 이벤트 순환이 무엇인지 알고 있다면, 이 절을 안전하게 건너갈 수 있습니다.
간단하게 말하면, 이벤트 순환은 자바스크립트가 막힌 작업을 처리하는 해결 방안이다.JS는 막힌 내용을 다른 라인으로 이동할 뿐입니다.
그런데 자바스크립트는 단선인 거 맞죠?물어봐도 돼.
Javascript는 그것을 사용하는 개발자에게 단일 라인입니다.어떤 일에 새로운 라인을 시작해서 자바나 Rust에서처럼 결과를 얻을 수 없습니다.그러나 이것은 자바스크립트로 작성된 모든 내용이 하나의 라인에서 실행된다는 것을 의미하지 않는다.
다음 코드를 실행할 때 몇 가지 일이 발생합니다.

function getTitle(gender) {
  // This is a vague simplification, gender is not binary.
    return (gender === 'M') ? 'Mr ' : 'Ms '; 
}
function print(content) {
 console.log(content);
}
function greet(name, gender) {
 const title = getTitle(gender);
 const message = `Hello, ${title}. ${name}`;
 print(message);
}

greet("Draper", "Male");

호출된 모든 함수는 하나의 창고에 추가됩니다. 호출 창고라고 합니다.모든 함수가 되돌아올 때, 이 함수는 창고에서 튀어나와 이전 함수를 복원합니다.모든 함수가 되돌아오면 창고가 비어 있습니다.
많은 함수 호출을 했는데, 예를 들면, 귀속 호출이 잘못되면, 최대 호출 창고를 초과하는 오류가 발생할 것이다.이것은 호출 창고가 이렇게 많은 것만 수용할 수 있고, 코드가 이 제한을 초과했다는 것을 의미합니다.
사건 순환이 없으면 무슨 일이 일어날지 상상해 봅시다.호출 창고에서 함수가 실행 중일 때 다른 함수는 기다려야 합니다.네트워크 호출 등의 기능을 기다리면 UI가 동결됩니다.이벤트 순환이 없으면, 모든 다른 코드는 네트워크 호출이 완료되고 되돌아오기를 기다려야 합니다.이 문제를 극복하기 위해 JS는 오랜 시간이 걸릴 수 있는 임무를 하나의 단독 라인으로 미루었다.

setTimeout(function (
    console.log("I'll show up after 5 seconds");
) {}, 5000);

위 코드에서 JS가 창고에 넣고 5초를 기다려야 한다면 모든 다른 함수와 사용자의 상호작용이 영향을 받을 것입니다.따라서, 비동기 작업을 다른 라인으로 전송하고, 나머지 동기화 코드를 계속 실행합니다.
비동기 함수가 실행되면 JS는 콜백 queue라는 대기열로 콜백 함수를 밀어 넣습니다.기술적으로 말하자면 두 개의 대열이 있는데 그것이 바로 마이크로 대열과 거대한 대열이다.간단하게 보기 위해서, 우리는 단지 하나의 대열만 있다고 가정한다.함수가 리셋 대기열에 밀어넣으면 이벤트 순환이 시작됩니다.이벤트 순환은 현재 호출된 창고가 비어 있는지 확인합니다.현재 호출된 창고가 비어 있을 때까지 리셋을 실행하지 않습니다.
현재 호출된 창고가 비어 있지 않으면 일부 작업이 진행 중임을 나타냅니다.호출 창고가 비어 있으면 이벤트 순환은 항목을 호출 대기열에서 호출 창고로 전송합니다.만약 대기열에 여러 항목이 있다면, 이 항목들은 하나하나 창고에 밀어넣고 실행될 것입니다.이벤트 순환에 대한 더 깊은 설명이 필요하시면 아래 내용을 보십시오

약속으로 돌아오다
Javascript는 이벤트 순환에 마이크로 작업 대기열을 사용하도록 약속합니다.공약을 만들 때, 공약의 리셋은 리셋 대기열에 들어갑니다. 설령 당신이 즉시 그것을 해결하더라도.그것은 창고가 비어 있을 때까지 기다려야 한다. 이것이 바로 약속이 항상 다른 이유이다.호출 창고에 항목을 추가하고 실행합니다. 호출 창고가 다시 비어 있는 과정은 이벤트 순환입니다.약속은 항상 사건의 순환 속에서 다시 한 번 교체해야만 해결할 수 있다.
관찰 대상은 동기화될 수도 있고 비동기적일 수도 있는데 이것은 관찰 대상이 실행하는 기능에 달려 있다.예를 들어 관찰할 수 있는 대상이 약속을 포함한다면 그것은 비동기적일 것이다.나는 rxjs 소스 코드를 읽고 관측 가능한 데이터가 어떻게 작동하고 발견되었는지 이해한다

Remember, callbacks provided to subscribe are not guaranteed to be called asynchronously. It is an Observable itself that decides when these functions will be called. Always check the documentation for how given Observable will behave when subscribed and if its default behavior can be modified with a scheduler.

관측할 수 있는 사물에 관해서 가장 좋은 점은 관측할 수 있는 사물이 동기화되는지 비동기적인지 걱정할 필요가 없다는 것이다.관찰자에게도 마찬가지다.이것은 코드를 작성하는 것을 훨씬 쉽게 한다.너는 구독만 하면 안의 내용이 모두 추상적이다.
this
평가
승낙은 열렬한 평가를 받았다.약속을 정의하고 구조 함수에 리셋 함수를 주면 바로 호출됩니다.이것은 네가 즉시 발사하고 싶은 물건에 매우 유용하다.
관측 가능한 값이 산만하게 평가되다.관찰 가능한 대상의 구조기에 리셋 함수를 주면, 관찰 가능한 대상을subscribe로 호출한 후에만 실행됩니다.나는observable의 원본 코드에서 아래 를 찾았고 이 사실을 상세하게 설명했다.이것은 관측 가능한 데이터를 사용할 때 똑같이 많은 제어를 제공했다.
누군가가 그것을 구독할 때까지 인용을 관찰할 수 있는 대상에게 전달할 수 있다.그것은 또한 우리가 여러 단계에서 관찰할 수 있는 데이터 흐름을 전환할 수 있도록 허용한다.나는 항상 서비스 단계에서 관찰 가능한 대상을 만들고 더 많은 조작원을 추가해서 필요에 따라 서로 다른 위치에서 데이터를 다른 형식으로 변환한다.