Major Tom에게 지상 제어 - RxJS의 HTTP 호출

Major Tom에게 지상 제어 - RxJS의 HTTP 호출

현대의 앱들은 매우 많은 HTTP 요청을 동시에 만든다. RxJS는 스트림 처리, 값에 반응, 비동기 동작 수행에 관한 모든 것이므로 HTTP 영역에서 사용하기 좋은 툴로 보인다. HTTP 요청 처리에 관한 한 RxJS는 우리에게 어떤 옵션을 제공하는가?

XMLHtpRequest 및 가져오기()

브라우저에서 실제로 사용할 수 있는 옵션부터 시작하겠습니다.

적어도 2006년으로 거슬러 올라가는 XMLHtpRequest(요약 - XHR)를 통해 HTTP 호출을 할 수 있습니다. 그것을 사용하는 것은 세상에서 가장 편리한 것은 아니지만, 그것은 대부분의 경우 그렇게 했고 지금도 그렇게 한다. 더 친근하게 만들기 위해, 매우 인기 있는 공리를 포함하여, 사용하기 쉬운 많은 포장지들이 만들어졌다.

좀 더 현대적인 또 다른 옵션은 Fetch API와 Fetch() 메서드로, 훨씬 편리한 인터페이스인 Promise를 반환한다.

차이점

fetch() 메서드는 약속(약속)을 반환합니다. HTTP 호출이 성공하고 오류가 있을 경우 이를 거부합니다. 사용하기 매우 쉽습니다.

XMLHTpRequest(XHR) 사용에는 많은 기능이 있지만 사용 편의성은 떨어집니다. 코드 참조:

이것이 주요 차이점입니다. 오늘날 우리는 비동기 코드를 편리하게 설명하기 위해 약속 구문과 비동기/대기 구문을 사용하려고 합니다. XHR의 콜백 솔루션은 더 복잡한 시나리오에서는 수행하기가 어렵습니다.

또 다른 차이점은 XHR 통화는 진행 상황을 쉽게 알 수 있는 방법을 제공하므로 더 큰 파일을 다운로드하거나 전송하고 사용자에게 진행 상황을 제시하고자 할 때 유용합니다.

반면, 가져오기() 방법은 ReadableStream을 가져와 들어오는 데이터를 청크로 처리하는 방법을 제공하며, 이는 대량의 데이터를 처리할 때 유용할 수 있다.

파일 전송 또는 가져오기를 중지하거나 응답에 더 이상 신경 쓰지 않을 때 요청을 취소하고 싶은 경우가 있습니다.

이것은 XHR을 사용할 때 쉽게 접근할 수 있습니다. xhr.abort()로 전화할 수 있습니다.

이전에는 약속()을 사용하므로 fetch() 메서드를 취소할 수 없었지만 AbortController를 사용하는 특별한 신호가 추가되어 fetch()에 의한 호출을 취소할 수 있습니다.

일부 브라우저에서는 Fetch API가 최신 버전이고 모든 최신 브라우저에서 지원되지만 이 API는 여전히 업데이트되므로 필요한 브라우저에서 사용되는 모든 기능이 지원되는지 확인하는 것이 가장 좋습니다.

RxJS는 어떤가?

보시다시피, 사용 가능한 두 가지 방법은 인터페이스와 상호 작용하는 방식이 매우 다릅니다. fetch() 메서드는 사용하기 편리하지만 덜 편리한 XMLHtpRequest의 일부 기능은 포함하지 않습니다.

여기 도움을 받아 RxJS가 온다! 관찰 가능은 위의 HTTP 인터페이스를 래핑하는 좋은 방법입니다. 가장 좋은 소식은 RxJS가 두 가지 모두를 편리하게 사용할 수 있는 많은 도구를 제공한다는 것이다!

RxJS에서 제공하는 도구를 이해하는 데 매우 중요하므로 사용 가능한 내장 HTTP 인터페이스에 대해 간략히 설명했습니다.

RxJS는 HTTP 호출을 수행하는 관찰 가능함을 반환하는 두 가지 도우미 함수를 제공합니다.

ajax() - XMLHtpRequest 사용

fromFetch() — fetch() 사용

참고: Angular 개발자들은 RxJS와 Observables를 사용하기도 하고 HTTP 호출을 처리하는 좋은 방법인 내장된 HttpClient 서비스를 사용할 가능성이 높습니다. 이 문서에서는 HttpClient 서비스를 다루지 않고 RxJS에 내장된 기능에 초점을 맞출 것입니다.

아약스의

ajax() 생성 함수는 XMLHtpRequest(XHR)를 래핑하고 관찰 가능 정보를 제공합니다.

간단한 GET 연산을 수행하는 것은 매우 쉽습니다.

좋은 점은 응답이 JSON 개체일 경우 자동으로 구문 분석되어 일반 자바스크립트 개체로 제공된다는 것입니다.

관찰 가능한 제품으로 포장된 덕분에 다른 관찰 가능과 마찬가지로 편리한 오류 처리와 복합성을 얻을 수 있습니다.

fromFetch()

fromFetch() 생성 함수는 Fetch API를 사용하여 fetch() 호출 위에 내장된 관찰 가능을 반환합니다.

간단한 GET 통화도 쉽지만, 보다 낮은 수준의 방식으로 업무를 처리할 수 있습니다. 엔드포인트에서 일부 JSON 응답을 가져오는 다음 코드를 고려해 보겠습니다.

Fetch()에서 선택기 옵션을 제공합니다. 이것은 우리가 반응의 어느 부분을 얻고자 하는지를 알려주는 데 사용됩니다. 선택기 필드를 사용하지 않고 위의 코드와 유사한 작업을 수행하려는 경우 다음과 같이 보일 수 있으므로 유용합니다.

예제 - Fetch vs ajax

이제 각 기능을 사용할 때 다양한 시나리오를 달성하는 방법을 비교해보겠습니다.

POST 요청 — ajax()

POST 요청 - fromFetch()

취소

RxJS 덕분에 HTTP 호출을 중단하려면 두 경우 모두 매우 간단합니다.

그냥 구독을 취소하세요. 나머지는 RxJS에서 처리해 드립니다.

진행상황 보고

이것은 아약스를 사용할 때만 쉽게 구할 수 있다.

다운로드 중인 파일의 진행 상황에 관심이 있는 경우:

업로드 진행률을 추적하는 데도 사용할 수 있습니다.

FromFetch()를 사용할 때 유사한 작업을 수행할 수 있지만 더 복잡하고 즉시 사용할 수 없습니다.

타임아웃

RxJS 덕분에, 이것은 둘 다 똑같이 작동한다.

HTTP 호출이 10초 이내에 응답하지 않으면 위에서 오류가 발생합니다.

fromFetch로 만든 관찰 가능 장치에서도 동일하게 작동하므로 ajax() 호출을 fromFetch()로 바꾸면 동일하게 작동합니다.

스트리밍

때로는 들어오는 데이터를 일괄 처리하여 응답이 끝나 모든 것을 메모리에 로드하기를 기다리지 않고 처리하려고 합니다.

FromFetch로 만든 Observable을 사용하여 이 작업을 수행할 수 있습니다.

선택기가 반응을 사용합니다.본문, ReadableStream을 반환합니다. RxJS는 이 스트림을 사용하여 수신 값을 내보냅니다. 그런 다음 .subscribe(...) 호출 내부의 핸들러에서 이를 추가로 처리할 수 있습니다.

기본 예비 값 제공

대부분의 경우 실제 통화에 실패할 경우 기본 응답을 제공할 가치가 있습니다. 이를 위해 catchError 연산자를 사용합니다.

보너스: 자동 완성

RxJS에서 HTTP 호출을 사용하는 가장 좋은 방법은 전체 관찰 가능 스트림의 내부에 HTTP 호출을 넣고 사용하는 것입니다.

예를 들어 사용자가 검색 질의에 입력할 수 있는 입력 텍스트 필드가 있다고 가정합니다. 사용자가 쿼리를 시작하고 계속 입력하고 수정할 때 서버에서 자동 완성 제안을 가져옵니다.

위의 코드는 사용자가 쿼리 입력을 업데이트할 때마다 반응하며 사용자가 많은 문자를 빠르게 입력할 경우 이벤트를 보고하고 서버에 새 HTTP 요청을 보냅니다.

또한 요청이 좀 더 오래 걸리고 사용자에 의해 새로운 검색 쿼리가 제공되면 이전 HTTP 요청이 취소되고 새로운 HTTP 호출이 이루어집니다. 이것은 switchMap 연산자 덕분입니다. 즉, 한 번에 하나의 호출만 진행 중이고 위에서 새 쿼리가 있을 경우 이전 호출을 취소합니다. 오퍼레이터의 파이프라인

다음 샌드박스에서 직접 사용해 볼 수 있습니다.

검색 쿼리 필드에 음료수 이름을 입력하기 시작합니다. 500ms 이상 정지하면 Cocktail DB API로 요청이 전송됩니다. 그런 다음, 반응이 음료의 이름에 매핑될 것입니다. 마지막으로, 이러한 이름은 쿼리 입력 아래의 목록으로 표시됩니다.

BTW, 브라우저가 성공적인 CORS(Cross-Origin Resource Sharing) 호출을 수행할 수 있도록 crossDomain: true ajax() 설정이 필요할 수 있습니다. CORS 요청은 웹 사이트의 도메인이 연결하려는 도메인과 다른 경우입니다.

계속 실험해 보세요. 코드를 바꾸세요. 재미있게 보내!

요약

RxJS는 편리하고 표준화된 방식으로 HTTP 호출을 통합하는 훌륭한 방법을 제공합니다. 특정 시나리오 및 개인 선호도에 필요한 기능에 따라 ajax() 및 fromFetch() 함수는 원하는 대로 사용할 수 있습니다. 자세한 기능 및 구성 옵션은 아래 링크된 문서를 참조하십시오. 계속 실험하고 재미있게 놀아요!

이 기사를 재미있게 보셨다면, 박수를 치시고 저를 따라오세요. 감사합니다.

유용한 링크

RxJS 문서: ajax()

RxJS 문서: fromFetch()

MDN: XMLHtpRequest - XHR

MDN: API 가져오기 - 가져오기()

RxJS에 새로운 제품입니까?

RxJS를 처음 접하거나 지식을 넓히고 싶으시다면, 제 RxJS와 관찰기기를 살펴보시기 바랍니다. 소개 코스.

from http://it-ground.tistory.com/217 by ccl(A) rewrite - 2021-10-27 21:00:12