js에 API 호출을 수행하는 올바른 방법은 무엇입니까?
최근에 Angular에서 ReactJs로 옮겼습니다. API 호출에 jQuery를 사용하고 있습니다. 목록에 인쇄 할 임의의 사용자 목록을 반환하는 API가 있습니다.
API 호출을 작성하는 방법을 잘 모르겠습니다. 가장 좋은 방법은 무엇입니까?
다음을 시도했지만 출력되지 않았습니다. 필요한 경우 대체 API 라이브러리를 구현할 수 있습니다.
아래는 내 코드입니다.
import React from 'react';
export default class UserList extends React.Component {
constructor(props) {
super(props);
this.state = {
person: []
};
}
UserList(){
return $.getJSON('https://randomuser.me/api/')
.then(function(data) {
return data.results;
});
}
render() {
this.UserList().then(function(res){
this.state = {person: res};
});
return (
<div id="layout-content" className="layout-content-wrapper">
<div className="panel-list">
{this.state.person.map((item, i) =>{
return(
<h1>{item.name.first}</h1>
<span>{item.cell}, {item.email}</span>
)
})}
<div>
</div>
)
}
}
이 경우 내부 에서 ajax 호출을 수행 한 다음 업데이트 할 수 있습니다.componentDidMountstate
export default class UserList extends React.Component {
constructor(props) {
super(props);
this.state = {person: []};
}
componentDidMount() {
this.UserList();
}
UserList() {
$.getJSON('https://randomuser.me/api/')
.then(({ results }) => this.setState({ person: results }));
}
render() {
const persons = this.state.person.map((item, i) => (
<div>
<h1>{ item.name.first }</h1>
<span>{ item.cell }, { item.email }</span>
</div>
));
return (
<div id="layout-content" className="layout-content-wrapper">
<div className="panel-list">{ persons }</div>
</div>
);
}
}
플럭스 아키텍처 를 확인하고 싶을 수도 있습니다 . 또한 React-Redux 구현을 확인하는 것이 좋습니다. 당신의 행동에 당신의 API 호출을 넣어야합니다. 구성 요소에 모두 넣는 것보다 훨씬 깨끗합니다.
작업은 응용 프로그램 상태를 변경하거나 API 호출을 수행하기 위해 호출 할 수있는 호출 도우미 메서드입니다.
fetch의 메소드를 내부 사용 componentDidMount하여 상태를 업데이트 하십시오 . 아래처럼
....
componentDidMount(){
fetch('https://randomuser.me/api/')
.then(({ results }) => this.setState({ person: results }));
}
....
redux http://redux.js.org/index.html을 보고 싶습니다.
그들은 API 호출에 대한 호출을 처리하는 매우 잘 정의 된 방법을 사용하는 대신 API 호출에 jQuery를 사용하는 대신 가져 오기 또는 요청 npm 패키지를 사용하고 싶습니다 . 페치 는 현재 최신 브라우저에서 지원 언어 shim도 사용할 수 있습니다.
이 또 다른 놀라운 패키지 수퍼 에이전트 도 있습니다.이 패키지는 API 요청을 할 때 많은 옵션이 있고 사용하기 매우 큰 패키지입니다.
이 토론은 오래 전부터 @Alexander T.의 답변은 새로운 사람이 나와 같이 반응 할 수있는 좋은 가이드를 제공했습니다. 그리고 동일한 API를 여러 번 호출하여 구성 요소를 새로 고치는 방법에 대한 추가 노하우를 공유 할 것입니다. 처음에 직면 할 수있는 일반적인 문제 일 것입니다.
componentWillReceiveProps(nextProps)에서 공식 문서 :
prop 변경에 응답하여 상태를 업데이트해야하는 경우 (예 : 상태) this.props 및 nextProps를 비교하고이 메소드에서 this.setState ()를 사용하여 상태 전이를 수행 할 수 있습니다.
여기서는 부모 구성 요소의 url 또는 props, API 호출 및 업데이트 상태로 나타날 수있는 곳에서 변수를 처리 할 수 있습니다.
@Alexander T.의 예를 기반으로 :
export default class UserList extends React.Component {
constructor(props) {
super(props);
this.state = {person: []};
}
componentDidMount() {
//For our first load.
this.UserList(this.props.group); //maybe something like "groupOne"
}
componentWillReceiveProps(nextProps) {
// Assuming parameter comes from url.
// let group = window.location.toString().split("/")[*indexParameterLocated*];
// this.UserList(group);
// Assuming parameter comes from props that from parent component.
let group = nextProps.group; // Maybe something like "groupTwo"
this.UserList(group);
}
UserList(group) {
$.getJSON('https://randomuser.me/api/' + group)
.then(({ results }) => this.setState({ person: results }));
}
render() {
return (...)
}
}
최신 정보
componentWillReceiveProps() 더 이상 사용되지 않습니다.
은 다음 일반적인 경우 API와 관련이 배포 있다고 생각되는 수명주기 의 일부 메소드 ( 문서의 모든 메소드 )입니다.
위의 다이어그램을 참조하여 :
에 API 배포
componentDidMount()여기에서 API 호출을 수행하는 적절한 시나리오는이 구성 요소의 컨텐츠 (API 응답에서)가 정적이며
componentDidMount()구성되는 동안 한 번만 실행되는 새로운 소품이 상위 구성 요소에서 전달되거나 선도 조치가re-rendering있습니다.
요소는 구성 다시 렌더링 할 수 있지만 다시 마운트 하지 않는 차이를 확인 합니다. 문서
에서 인용 :
원격 엔드 포인트에서 데이터를로드해야하는 경우 네트워크 요청을 인스턴스화하는 것이 좋습니다.
- 에 API 배포
static getDerivedStateFromProps(nextProps, prevState)
우리는 두 가지 종류가 있다는 것을주의해야 구성 요소 업데이트 , setState() 현재의 구성 요소 것 없는 트리거에이 방법을지도,하지만에서 다시 렌더링하거나 새로운 소품 부모 구성 요소는 않습니다. 이 방법은 장착하는 동안에도 발생한다는 것을 알 수있었습니다.
현재 구성 요소를 템플릿처럼 사용하려는 경우 API를 배포하기에 적절한 위치 이며 API의 새 매개 변수는 상위 구성 요소에서 오는 소품 입니다.
API로부터 다른 응답을 받고 state여기에 new를 반환 하여이 구성 요소의 내용을 변경합니다.
예 :
상위 구성 요소에 다른 Cars에 대한 드롭 다운 목록이 있습니다.이 구성 요소는 선택한 항목의 세부 정보를 표시해야합니다.
- API 배포
componentDidUpdate(prevProps, prevState)
와 static getDerivedStateFromProps()달리,이 메소드는 오류 메시지에 호출됩니다. 하나의 구성 요소에서 API 호출 및 차이를 수 있습니다.
이전 예를 확장합니다.
Car의 세부 정보를 표시하는 구성 요소에는이 자동차의 시리즈 목록이 포함될 수 있습니다. 2013 년 생산 제품을 확인하려면 목록 항목을 클릭하거나 선택하거나 ... setState()이를 반영하기 위해 먼저 리드 할 수 있습니다. 이 컴포넌트에서 동작 (예 : 목록 항목 강조 표시)을 수행하고, 다음 componentDidUpdate()에서는 새 매개 변수 (상태)와 함께 요청을 보냅니다. 응답을받은 후, 우리는 setState()다시 자동차 세부 정보의 다른 내용을 렌더링했습니다. 다음 componentDidUpdate()으로 인해 무한 루프가 발생 하지 않도록하려면 prevState이 메서드의 시작 부분을 활용하여 상태를 비교 하여 API를 전송하고 새 콘텐츠를 렌더링할지 결정해야합니다.
이 방법은 정말처럼 활용 될 수있는 static getDerivedStateFromProps()소품 만의 변경 사항을 처리 할 필요 props활용하여 prevProps. 그리고 우리는 componentDidMount()초기 API 호출을 처리 하기 위해 협력해야합니다 .
문서 에서 인용 :
... 이것은 또한 현재 props를 이전 props와 비교하는 한 네트워크 요청을 수행하기에 좋은 곳입니다 ...
렌더 함수는 순수해야합니다. 즉, 렌더링 할 때 상태와 소품 만 사용하고 렌더에서 상태를 수정하려고하지 않습니다. 이는 일반적으로보기 흉한 버그를 유발하고 성능을 크게 저하시킵니다. React App에서 데이터 가져 오기와 렌더링 문제를 분리하는 것도 좋은 점입니다. 이 아이디어를 잘 설명하는이 기사를 읽어 보시기 바랍니다. https://medium.com/@learnreact/container-components-c0e67432e005#.sfydn87nm
React v16 문서 의이 부분 은 componentDidMount ()에 대한 질문에 답할 것입니다.
componentDidMount ()
componentDidMount ()는 구성 요소가 마운트 된 직후에 호출됩니다. DOM 노드가 필요한 초기화는 여기로 가야합니다. 원격 엔드 포인트에서 데이터를로드해야하는 경우 네트워크 요청을 인스턴스화하기에 좋은 위치입니다. 이 방법은 구독을 설정하기에 좋은 장소입니다. 그렇게한다면 componentWillUnmount ()에서 구독을 취소하는 것을 잊지 마십시오.
보시다시피 componentDidMount 는 api 호출 을 수행하고 노드에 액세스 할 수 있는 가장 좋은 장소 및 주기로 간주됩니다. 즉, 이번에는 호출을 수행하고 뷰를 업데이트하거나 문서가 준비되었을 때 할 수있는 모든 작업을 수행하는 것이 안전합니다. jQuery를 사용하면 어떻게 든 document.ready () 함수를 상기시켜 주어야합니다. 여기서 코드에서 원하는 작업에 대해 모든 것이 준비되었는지 확인할 수 있습니다.
1) F etch API 를 사용 하여 Endd Points에서 데이터를 가져올 수 있습니다 .
Github사용자에 대한 모든 repose 가져 오기 예제
/* Fetch GitHub Repos */
fetchData = () => {
//show progress bar
this.setState({ isLoading: true });
//fetch repos
fetch(`https://api.github.com/users/hiteshsahu/repos`)
.then(response => response.json())
.then(data => {
if (Array.isArray(data)) {
console.log(JSON.stringify(data));
this.setState({ repos: data ,
isLoading: false});
} else {
this.setState({ repos: [],
isLoading: false
});
}
});
};
2) 다른 대안은 Axios입니다.
axios를 사용하면 http 요청의 결과를 .json () 메서드에 전달하는 중간 단계를 생략 할 수 있습니다. Axios는 예상 한 데이터 개체를 반환합니다.
import axios from "axios";
/* Fetch GitHub Repos */
fetchDataWithAxios = () => {
//show progress bar
this.setState({ isLoading: true });
// fetch repos with axios
axios
.get(`https://api.github.com/users/hiteshsahu/repos`)
.then(result => {
console.log(result);
this.setState({
repos: result.data,
isLoading: false
});
})
.catch(error =>
this.setState({
error,
isLoading: false
})
);
}
이제이 전략 중 하나를 사용하여 데이터를 가져올 수 있습니다. componentDidMount
class App extends React.Component {
state = {
repos: [],
isLoading: false
};
componentDidMount() {
this.fetchData ();
}
한편 데이터가로드되는 동안 진행률 표시 줄을 표시 할 수 있습니다.
{this.state.isLoading && <LinearProgress />}
깨끗한 방법은 componentDidMount 내에서 비동기 API 호출을 수행하는 것 입니다. 시도 / 캐치 기능을 .
API를 호출하면 응답을받습니다. 그런 다음 JSON 메서드를 적용하여 응답을 JavaScript 개체로 변환합니다. 그런 다음 해당 응답 개체에서 "results"(data.results)라는 자식 개체 만 가져옵니다.
처음에 우리는 state에서 "userList"를 빈 배열로 정의했습니다. API를 호출하고 해당 API에서 데이터를 수신하자마자 setState 메소드를 사용하여 "결과"를 userList에 할당합니다 .
함수 안에서 userList가 온다고 알려줍니다. userList는 수업의 배열이 완성되어 "사용자"의 그림, 이름 및 "사용자"를 표시합니다. 이 정보를 검색하기 위해 점 표기법 (예 : user.phone)을 사용합니다.
참고 : API에 따라 응답이 다르게 보일 수 있습니다. Console.log 전체 "응답"에서 필요한 변수를 확인한 후 setState에 할당하십시오.
UserList.js
import React, { Component } from "react";
export default class UserList extends Component {
state = {
userList: [], // list is empty in the beginning
error: false
};
componentDidMount() {
this.getUserList(); // function call
}
getUserList = async () => {
try { //try to get data
const response = await fetch("https://randomuser.me/api/");
if (response.ok) { // ckeck if status code is 200
const data = await response.json();
this.setState({ userList: data.results});
} else { this.setState({ error: true }) }
} catch (e) { //code will jump here if there is a network problem
this.setState({ error: true });
}
};
render() {
const { userList, error } = this.state
return (
<div>
{userList.length > 0 && userList.map(user => (
<div key={user}>
<img src={user.picture.medium} alt="user"/>
<div>
<div>{user.name.first}{user.name.last}</div>
<div>{user.phone}</div>
<div>{user.email}</div>
</div>
</div>
))}
{error && <div>Sorry, can not display the data</div>}
</div>
)
}}
참고 URL : https://stackoverflow.com/questions/38742334/what-is-right-way-to-do-api-call-in-react-js
'IT' 카테고리의 다른 글
| HTML5shiv vs Dean Edwards IE7-js vs Modernizr- 어떤 것을 선택해야합니까? (0) | 2020.07.26 |
|---|---|
| C ++ 11의 새로운 구문“= default” (0) | 2020.07.26 |
| ggplot2를 사용하여 R에서 투명한 배경으로 그래픽을 만드는 방법은 무엇입니까? (0) | 2020.07.26 |
| 비 관계형 데이터베이스 디자인 (0) | 2020.07.26 |
| 잘못된 열거 형 값으로 int를 캐스팅하면 예외가 발생하지 않는 이유는 무엇입니까? (0) | 2020.07.26 |