在 React 中根据响应加载视图
介绍
通过 HTTP 与服务器交互是任何 Web 开发人员工作的核心部分。用户将导航到应用程序内的视图，期望以某种方式看到呈现给他们的数据。有时这些数据是静态的，您不必从后端请求它。但大多数情况下，这些数据是动态的或太大而无法静态存储在客户端上。当 React 应用程序中发生这种情况时，需要使用 HTTP 客户端来向包含所需数据的服务器发出请求。
在本指南中，您将学习如何在 React 组件中使用 Axios HTTP 客户端根据给定的响应加载视图。
让我们开始吧！
注意：本指南假设您已经创建或正在使用 React 应用程序。
通过 HTTP 请求数据
根据 HTTP 响应加载视图的第一步是下载并开始使用 HTTP 客户端。在本指南中，我们选择 Axios 作为我们的首选 HTTP 客户端库。还有很多替代方案！如果您试图限制应用中使用的依赖项数量，Fetch 是一个很棒的本机客户端，您可以使用它。
要下载 Axios，请导航到package.json文件所在的根项目目录，然后运行命令：npm install --save axios。现在，您已在 React 项目中安装了 Axios，可以开始使用它了！
在下面的代码中，您将看到DinosaurView组件的基本外壳。此组件的作用是通过 HTTP 从服务器请求恐龙列表，然后根据响应呈现Dino组件列表。
class DinosaurView Extends React.Component {
constructor(props) {
super(props);
this.state = {
dinosaurs: []
}
}
componentDidMount() {
...
}
render() {
...
}
}
您需要根据componentDidMount生命周期方法中请求的恐龙列表来设置恐龙状态。componentDidMount生命周期方法将确保仅在DinosaurView组件首次渲染后才请求恐龙数据。这很有用，因为您可以在等待请求完成时显示一个简单的加载屏幕。
下面是更新后的代码，展示了如何使用 Axios 向我们的私有恐龙 API 发出请求。
import axios from 'axios';
class DinosaurView Extends React.Component {
constructor(props) {
super(props);
this.state = {
dinosaurs: []
}
}
async componentDidMount() {
const dinoResponse = await axios.get(this.props.dinosaurUrl);
this.setState({ dinosaurs: dinoResponse.dinosaurs });
}
render() {
...
}
}
哇，这很简单！在上面的代码中，您首先导入了 Axios HTTP 客户端库。然后，您将componentDidMount标记为异步函数。这样就可以使用await关键字来解析从对axios.get的调用返回的Promise。成功加载响应后，您只需使用setState函数来设置组件的恐龙状态。
请求完数据后，现在该加载视图了。请记住，此组件只是想显示Dino组件列表。这可以通过实现以下渲染函数来实现。
...
render() {
const dinosaurs =
this.state
.dinosaurs
.map(dino => <Dino name={dino.name} type={dino.type} roar={dino.roar} />);
return (
<ul>{dinosaurs}</ul>
)
}
}
结论
当涉及在 React 应用中动态加载视图时，HTTP 几乎是必不可少的。为了通过 HTTP 与服务器交互，您需要在前端使用某种 HTTP 客户端。您可以使用 Axios、原生 Fetch 客户端或任何其他可供下载的 HTTP 客户端 NPM 包。
当然，HTTP 并不是唯一的方法！当谈到根据后端请求的数据加载视图时，GraphQL 正成为一种流行的选择。有关 GraphQL 的更多信息，请查看 GraphQL文档。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~