React.js에서 Axios와 함께 비동기/Awit 사용

React.js에서 Axios와 함께 비동기/Awit 사용

다음에 나오는

반응에서 Axios를 사용하여 비동기/대기 사용하는 방법

React.js 앱에서 Async/Awit을 사용하여 서버에 간단한 get 요청을 하려고 합니다.서버는 다음 위치에 단순한 JSON을 로드합니다./data이렇게 생겼는데

JSON

{
   id: 1,
   name: "Aditya"
}

간단한 jquery ajax get 메서드를 사용하여 데이터를 리액트 앱으로 가져올 수 있습니다.다만, ES7 규격에 준거한 Axios 라이브러리와 Async/Awit를 활용하고 싶습니다.현재 코드는 다음과 같습니다.

class App extends React.Component{
 async getData(){
     const res = await axios('/data');
     console.log(res.json());
 }
 render(){
     return(
         <div>
             {this.getData()}
         </div>
     );
 }
}

이 방법을 사용하면 다음 오류가 발생합니다.

개체는 React 하위 개체로 유효하지 않습니다(찾은 개체: [Promise]).하위 집합을 렌더링하려는 경우 대신 배열을 사용하십시오.

제가 제대로 구현하고 있지 않나요?

다음 두 가지 문제가 발생합니다.

1. 당신의.getData아무것도 돌려주지 않기 때문에 그 약속(async함수는 항상 약속을 반환한다)로 이행한다.undefined거절하지 않으면

2. 에러 메세지는, 약속을 직접 전달하려고 하고 있는 것을 나타내고 있습니다.getData안정되기를 기다렸다가 이행값을 렌더링하는 것이 아니라 반환한다.

주소 1:getData호출 결과를 반환해야 합니다.json:

async getData(){
   const res = await axios('/data');
   return await res.json();
}

Addressig #2: 코드를 더 많이 확인해야 하는데 기본적으로는 할 수 없습니다.

<SomeElement>{getData()}</SomeElement>

...왜냐하면 그것은 해결을 기다리지 않기 때문이다.그 대신에, 다음의 것을 사용해 주세요.getData상태를 설정하려면:

this.getData().then(data => this.setState({data}))
              .catch(err => { /*...handle the error...*/});

렌더링할 때 이 상태를 사용합니다.

<SomeElement>{this.state.data}</SomeElement>

---

업데이트: 코드를 보여줬으니 다음과 같은 작업을 수행해야 합니다.

class App extends React.Component{
    async getData() {
        const res = await axios('/data');
        return await res.json(); // (Or whatever)
    }
    constructor(...args) {
        super(...args);
        this.state = {data: null};
    }
    componentDidMount() {
        if (!this.state.data) {
            this.getData().then(data => this.setState({data}))
                          .catch(err => { /*...handle the error...*/});
        }
    }
    render() {
        return (
            <div>
                {this.state.data ? <em>Loading...</em> : this.state.data}
            </div>
        );
    }
}

향후 갱신:사용하는 방법을 지정했습니다.await에componentDidMount보다는then그리고.catch네스트레이션으로 할 수 있어요.asyncIIFE 함수는 그 안에서 기능하며, 그 함수가 던지지 않도록 합니다.(componentDidMount그 자체는 있을 수 없다async그 약속을 소비하는 것은 아무것도 없습니다). 예:

class App extends React.Component{
    async getData() {
        const res = await axios('/data');
        return await res.json(); // (Or whatever)
    }
    constructor(...args) {
        super(...args);
        this.state = {data: null};
    }
    componentDidMount() {
        if (!this.state.data) {
            (async () => {
                try {
                    this.setState({data: await this.getData()});
                } catch (e) {
                    //...handle the error...
                }
            })();
        }
    }
    render() {
        return (
            <div>
                {this.state.data ? <em>Loading...</em> : this.state.data}
            </div>
        );
    }
}

지난 몇 달 동안의 경험을 통해 이를 실현하는 가장 좋은 방법은 다음과 같다는 것을 깨달았습니다.

class App extends React.Component{
  constructor(){
   super();
   this.state = {
    serverResponse: ''
   }
  }
  componentDidMount(){
     this.getData();
  }
  async getData(){
   const res = await axios.get('url-to-get-the-data');
   const { data } = await res;
   this.setState({serverResponse: data})
 }
 render(){
  return(
     <div>
       {this.state.serverResponse}
     </div>
  );
 }
}

클릭 등의 이벤트로 포스트 요청을 하려고 하면getData()이벤트 내용을 다음과 같이 치환합니다.

async getData(username, password){
 const res = await axios.post('url-to-post-the-data', {
   username,
   password
 });
 ...
}

또한 컴포넌트가 로딩되려고 할 때 어떤 요청이 있을 경우 단순히 교체하기만 하면 됩니다.async getData()와 함께async componentDidMount()렌더링 기능을 다음과 같이 변경합니다.

render(){
 return (
  <div>{this.state.serverResponse}</div>
 )
}

 async fetchCatFacts() {
    await axios.get("//localhost:8082/api_v1/orders", {})
        .then((response) => {

          this.catFacts = response.data.data;
          console.log("resp", response.data);
        });

언급URL : https://stackoverflow.com/questions/46733354/use-async-await-with-axios-in-react-js