在 React 中处理 API 响应

2020-11-17 08:00:00 · 飞浪

无论您正在构建什么 React 应用程序，在某些时候，您可能都希望向数据库服务器或*端点*发出请求并获取一些数据显示给用户。

介绍

使用REST API等后端服务是前端开发人员最常见的任务之一。无论您正在构建什么 React 应用，在某个时候，您可能都希望向数据库服务器或端点发出请求并获取一些数据以显示给用户。例如，如果您正在构建社交媒体应用，并且想要向用户显示某篇帖子的评论，则需要向专用 API 发出请求以获取所有评论，然后在您的应用中进一步处理。

在本指南中，您将学习如何在 React 应用中调用 API 来获取其响应。

初始设置

让我们通过一个示例来更好地了解如何调用 API 响应。通过运行以下命令创建一个空的 React 应用程序：

      npx create-react-app react-api-response

接下来安装 Axios 库。Axios 是一个简化与 API 交互过程的库。

      npm i axios

您将在本例中使用的端点是 https://jsonplaceholder.typicode.com/comments。这是一个免费的 REST API 端点，可返回一些您可以尝试的虚拟数据。您可以选择任何其他此类 API，也可以使用您自己的 API。

创建状态来存储响应

无论您从 API 获得什么响应，您都需要将其存储在该组件本地，以便进一步处理。从 React 导入useState钩子以创建一个状态来存储响应。

      import React,{useState} from 'react';
    

创建一个状态变量comments，以及一个钩子，使用useState钩子设置此状态变量setComments的值。

      const [comments,setComments]=useState([])

由于返回的评论将是一个对象数组，每个对象代表一条评论，因此评论的初始值是一个空数组。

调用 API 并处理响应

通常，您希望在组件的整个 DOM 加载时获取组件内部的数据。换句话说，当您的App组件首次挂载在 DOM 上时，您需要向 API 发出请求。在 React 中，这可以通过名为componentDidMount() 的组件生命周期方法执行，该方法在组件首次加载到 DOM 上时触发。可以通过在useEffect()中使用async关键字触发异步函数并传递一个空数组作为参数来执行简单的钩子实现，如下所示。

      useEffect(() => {
	fetchComments();
}, [])
    

创建fetchComments()方法，如下所示。

      const fetchComments=async()=>{
    const response=await Axios('https://jsonplaceholder.typicode.com/comments');
    setComments(response.data)    
}
    

在fetchComments()中，通过将端点传递给 Axios 来调用 API，并使用await关键字将响应存储在变量中。可以通过调用响应对象上的data属性来设置state ，从而引用端点中的所有注释。您可以使用以下代码检查是否已将注释正确附加到状态：

      useEffect(() => {
    console.log(comments)
}, [comments])
    

在 DOM 上输出响应

到目前为止，在本指南中，您已调用 API 响应并将其存储在您的state中。您可以使用state进一步处理它。例如，您可以循环浏览评论并在 DOM 上呈现每个评论，如下所示。

      return (
    <div className="App">
      {
        comments && comments.map(comment=>{
          return(
            <div key={comment.id} style={{alignItems:'center',margin:'20px 60px'}}>
            <h4>{comment.name}</h4>
            <p>{comment.email}</p>
          </div>
          )

        })
      }
     
    </div>
  );
    

看一下整个App组件，它在挂载时调用 API，将响应设置为组件的状态，并将其输出到 DOM 上。

      import './App.css';
import Axios from 'axios'
import React,{useState,useEffect} from 'react';

function App() {
  const [comments,setComments]=useState([])
  useEffect(() => {
    fetchComments();
  }, [])
  useEffect(() => {
    console.log(comments)
  }, [comments])
  const fetchComments=async()=>{
    const response=await Axios('https://jsonplaceholder.typicode.com/comments');
    setComments(response.data)    
  }
  return (
    <div className="App">
      {
        comments && comments.map(comment=>{
          return(
            <div key={comment.id} style={{alignItems:'center',margin:'20px 60px'}}>
            <h4>{comment.name}</h4>
            <p>{comment.email}</p>
          </div>
          )

        })
      }
    </div>
  );
}

export default App;
    

结论

您可以通过从应用发出不同类型的请求，以不同的方式与 API 交互。例如，您可以发出POST请求，通过将新评论存储在数据库中来添加新评论。但是，要在加载组件时处理来自服务器的任何动态数据，您应该在componentDidMount()中发出请求并将其存储在您的state中，如示例所示。除了简单地输出这些数据之外，您还可以探索更多选项，例如过滤或排序数据、添加分页等。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

在 React 中处理 API 响应

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

return ( <div className="App"> { comments && comments.map(comment=>{ return( <div key={comment.id} style={{alignItems:'center',margin:'20px 60px'}}> <h4>{comment.name}</h4> <p>{comment.email}</p> </div> ) }) } </div> );

import './App.css'; import Axios from 'axios' import React,{useState,useEffect} from 'react'; function App() { const [comments,setComments]=useState([]) useEffect(() => { fetchComments(); }, []) useEffect(() => { console.log(comments) }, [comments]) const fetchComments=async()=>{ const response=await Axios('https://jsonplaceholder.typicode.com/comments'); setComments(response.data) } return ( <div className="App"> { comments && comments.map(comment=>{ return( <div key={comment.id} style={{alignItems:'center',margin:'20px 60px'}}> <h4>{comment.name}</h4> <p>{comment.email}</p> </div> ) }) } </div> ); } export default App;