react ajax 예제

이전 예제에서는 구성 요소의 첫 번째 렌더링 전에 구성 요소가 마운트하려고 할 때 호출되는 구성 요소WillMount() 라이프 사이클 이벤트에서 데이터 가져오기 논리를 호출했습니다. React 프로젝트에서 아약스를 시도해 보셨습니까? 당신은 다음 / 캐치 절 또는 redux-thunk 및 redux-사가 같은 Redux 미들웨어에서 setState를 사용하여 공식 FAQ에서 예를 시도 했을 수 있습니다. 어느 쪽이든 상태 관리는 많은 작업이 필요합니다. 하지만, 기다려. 원래 문제에 대한 대체 솔루션이 있습니다. 그것은 RxJS입니다. 우리의 간단한 예제에서 우리는 하나의 구성 요소를 가지고 있지만 이것은 쉽게 같은 것을 고려 할 수있다 : 내 원래 게시물이 재구성을 사용하지만, 지금은 다양한 기능을 갖는 구성 요소의 집합입니다 reenhance-components를 만들었습니다. 이 문서에서는 RxJS에 빌드된 AsyncResolve를 사용 하 여 예제를 표시 하 고 다시 구성 합니다. fetch() API 및 약속은 대상 고객의 브라우저에서 사용할 수 있는지 확인합니다. 예를 들어 Internet Explorer를 지원하려면 폴리필이 필요합니다. 이제 브라우저의 가져오기 API를 사용하여 실용적인 예제를 살펴보겠습니다.

데이터가 응용 프로그램을 통해 흐르는 방법을 이해하는 데 큰 도움이되는 것은 redux 또는 기타 상태 관리 라이브러리 (플럭스, mobx)에 대한 지식입니다. 이는 예제 B에 설명된 솔루션과 유사하지만 부모에서 자식으로 데이터를 전달하는 대신 소품 설정을 관리하는 상태 관리자에 데이터를 보관합니다. 데이터는 더 이상 구성 요소에서 구성 요소로 전달되지 않습니다 (소품을 수동으로 할당 할 필요가 없습니다 – 더 이상 조부모 > 부모 > 자식 > 손자 체인!) 대신 저장소에서 직접 가져옵니다 (전역적으로 사용 가능한 단일 개체로 저장소를 생각하십시오). 모든 응용 프로그램 상태와 데이터를 보유 – 이것은 무서운 소리 수 있지만, 주어진 구현의 문서를 읽어보시기 – 나는 새로운 사용자를 위해이 쉽게 유지하기 위해 일을 지나치게 단순화하고 있어요). 두 번째 인수에서 메서드 이름을 명시적으로 지정하여 POST, PUT 또는 DELETE와 같은 다른 HTTP 메서드를 호출할 수도 있습니다. 예를 들어, 여기에 우리가 fetch() UPDATE와 함께 POST 요청을 보내는 방법: 이 섹션에서는 원래 구성 요소를 사용 해야 한다고 명시된WillMount 하지만 실제로 권장 되지 않습니다-ajax 호출 등 부작용을 일으키는 모든 작업을 만들어야 합니다. 구성 요소디마운트, 구성 요소DidUpdate . 나는 반응 후크를 도입 반응의 최신 버전을 사용하고 있습니다. 예제의 구성 요소는 useState Hook을 사용하는 상태 정보 기능 구성 요소입니다(더 이상 클래스 구성 요소를 작성할 필요가 없습니다???? ♂️).

당신은 당신이 알고있는 모든 axios를 사용할 수 있도록 구글 스프레드 시트에 가는 POST ajax 요청의 자세한 예를 제공 할 수 있습니다 당신이 알고있는 방법 프로미스 작동 방식입니다 – 당신이 전에 jQuery.ajax를 사용하는 경우, 당신은 갈 준비가되어 있어야합니다.

Shares

Posted on 2nd August 2019 in Uncategorised

Share the Story

About the Author

Back to Top
Shares