React.js br 标签和 AJAX 请求

2020-09-15 08:00:00 · 飞浪

介绍在使用Web应用时，您需要从服务器访问数据。为此，您需要使用fetch()或其他第三方库（例如Axios）实现AJAX调用。在React中，您可以使用自闭合标签在文本或部分之间产生

介绍

在使用 Web 应用时，您需要从服务器访问数据。为此，您需要使用fetch()或其他第三方库（例如Axios ）实现 AJAX 调用。在 React 中，您可以使用自闭合 标签在文本或部分之间产生换行符，而在 HTML 中，您可以使用 …  。通过本指南，您将详细了解如何使用 标签和 AJAX 调用。

实现 AJAX 调用

数据可访问性是任何 Web 或移动应用从服务器获取数据的主要要求。因此，您需要通过提供要从中获取数据的 API URL 来实现 AJAX 调用。

使用 fetch() 进行 AJAX 调用

fetch() 是浏览器内置的API，允许您基于XMLHttpRequest协议进行网络调用，用于通过网络消耗资源。

进行网络调用最容易访问的选项之一是fetch()，其中您需要提供服务器 URL 以及其他参数，例如请求标头、请求类型等。

以下是使用fetch() 的简单语法。

      fetch('API_URL')
  .then(response => response.json())
  .then(data => console.log(data));
    

除了获取 API 之外，您还需要传递获取资源的服务器 API URL。如果成功，响应将返回结果；否则，您需要处理错误。

下面是从服务器获取数据以及错误处理部分的完整示例。

      componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(
        result => {
          this.setState({
            users: result
          });
        },
        error => {
          // error handling
          console.log(error);
        }
      );
}
    

上述示例使用一个虚拟 API URL 来获取数据，一旦 API 成功，响应就会在 React 组件中使用。否则，如果 API 未能返回结果，则会执行错误部分。

使用第三方库进行 AJAX 调用

您可以应用fetch() API，或者还有大量第三方库可用于进行网络调用，例如 Axios。

在使用 React 应用之前，你需要先安装第三方库。例如，你可以使用以下命令安装 Axios 库。

      npm install axios

安装库后，您可以使用 Axios 包进行网络调用；下面是展示如何在组件中使用 Axios 的简单语法。

      axios
    .get("API_URL")
    .then(function(response) {
    // use response
})
    

Axios 的语法与fetch()相同，您需要传递 API URL，然后传递可以管理 API 响应的then部分。

下面是展示如何使用 Axios 库的完整示例。

      componentDidMount() {
    var self = this;
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then(function(response) {
        self.setState({ users: response.data });
      });
}
    

如上例所示，您可以使用get() API 调用，然后输入 API URL。一旦服务器收到响应，响应数据就会存储在组件的本地状态中。

您可以管理错误处理，如下所示。

      componentDidMount() {
    var self = this;
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then(function(response) {
        self.setState({ users: response.data });
      })
      .catch(function(error) {
        console.log(error);
      })
      .finally(function() {
        // Always executed with the try block
      });
}
    

添加了两个额外的部分，称为catch()和finally()，用于管理请求/响应错误。

在 React 中使用标签

在 HTML 中，我们使用 标签来分隔中间的字符串或者分节；因此，如果要分隔字符串，则会放置 标签，并且后面的内容将移动到下一行。

例如，有一个字符串，您可以使用 ，如下所示。

      <html>
 <body>
  <span>This is first one <br> This is second one</span>
 </body>
</html>
    

在标签之间，有一个 标签。因此，运行上述示例后，输出应如下所示：

      This is first one 
This is second one
    

但是在 React 中， 的使用方式不同，这意味着br标签将被用作自闭合标签，而在 HTML 中，它可以像 一样用来分隔部分。

      render() {
    return (
      <div>
        <p>BR tag in React</p>
        <hr />
        <span>SPAN1</span><br/>
        <span>SPAN2</span>
      </div>
    );
}
    

上面的例子使用了两个不同的标签：和。在它们之间，使用了一个自闭合的 标签。

当您运行上述示例时，所有部分都将移动到新行，而不是 DOM 的同一行。

但是如果您使用不带斜线的 ，那么您将收到以下错误。

      Expected corresponding JSX closing tag for 'br'.

结论

AJAX 调用是任何应用程序从服务器获取资源的重要组成部分，而 标签是在 DOM 元素之间使用后立即中断部分的解决方案之一。

我希望本指南能引起您的注意，以了解 AJAX 调用以及如何在 React 中有效使用 标签。继续学习！

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

_查看原文

技术指南

React框架

阅读全文

React.js br 标签和 AJAX 请求

杭州电子商务研究院

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

componentDidMount() { fetch("https://jsonplaceholder.typicode.com/users") .then(res => res.json()) .then( result => { this.setState({ users: result }); }, error => { // error handling console.log(error); } ); }

componentDidMount() { var self = this; axios .get("https://jsonplaceholder.typicode.com/users") .then(function(response) { self.setState({ users: response.data }); }); }

componentDidMount() { var self = this; axios .get("https://jsonplaceholder.typicode.com/users") .then(function(response) { self.setState({ users: response.data }); }) .catch(function(error) { console.log(error); }) .finally(function() { // Always executed with the try block }); }