在 React.js 中将 Async/Await 与 Axios 一起使用

Question

关注

How to use async/await with axios in react

我正在尝试在 React.js 应用程序中使用 Async/Await 向我的服务器发出简单的获取请求。 服务器在/data 加载一个简单的 JSON，如下所示

JSON

{
   id: 1,
   name: "Aditya"
}

我能够使用简单的 jquery ajax get 方法将数据获取到我的 React 应用程序。 但是，我想利用 axios 库和 Async/Await 来遵循 ES7 标准。 我当前的代码如下所示：

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

使用这种方法我得到以下错误：

对象作为 React 子级无效（找到：[object Promise]）。如果 你的意思是渲染一组孩子，使用一个数组来代替。

我没有正确实现它吗？

Answer 1

跳出两个问题：

1. 你的getData 永远不会返回任何东西，所以如果它不拒绝，它的承诺（async 函数总是返回一个承诺）将通过undefined 实现

2. 错误消息清楚地表明您正在尝试直接渲染 promise getData 返回，而不是等待它解决然后渲染履行值

寻址#1：getData应该返回调用json的结果：

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

地址 #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>
        );
    }
}

进一步更新：您已表明在componentDidMount 中使用await 而不是then 和catch 的偏好。您可以通过在其中嵌套 async IIFE 函数并确保该函数不会抛出来做到这一点。 （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>
        );
    }
}

Answer 2

根据过去几个月的经验，我意识到实现这一目标的最佳方法是：

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>
 )
}

Answer 3

Async/Await with axios 

  useEffect(() => {     
    const getData = async () => {  
      await axios.get('your_url')  
      .then(res => {  
        console.log(res)  
      })  
      .catch(err => {  
        console.log(err)  
      });  
    }  
    getData()  
  }, [])

Answer 4

const axios = require('axios').default;

const sendGetRequest = async () => {
    try {
        const resp = await axios.get('https://jsonplaceholder.typicode.com/posts', {
            headers: {
                'authorization': 'Bearer YOUR_JWT_TOKEN_HERE'
            }
        });

        console.log(resp.data);
    } catch (err) {
        // Handle Error Here
        console.error(err);
    }
};

sendGetRequest();