如何使用 React 处理 Ajax

2020-02-05 08:00:00 · 飞浪

介绍 React是一个基于JavaScript的库，用于创建基于组件架构的用户界面。在使用它时，我们还需要从外部远程端点访问数据。大多数基于Web或移动的应用程序需要访问远程服务器的数

介绍

React 是一个基于 JavaScript 的库，用于创建基于组件架构的用户界面。在使用它时，我们还需要从外部远程端点访问数据。

大多数基于 Web 或移动的应用程序需要访问远程服务器的数据来呈现用户交互数据，例如用于支付的静态数据、用于商品详情的数据等等。

由于 HTTP 调用是 Web 应用程序工作时的主要内容，因此我们必须根据功能需求选择合适的库。

在本指南中，我们将学习如何使用 Ajax 调用 React 应用程序。

何时在 React 中发出 Ajax 请求

使用 Web 应用程序时，我们应该有要呈现的数据，并且应该从本地模拟数据或远程端点使用这些数据。

React 没有用于调用 API 的内置包，因为 React 是一个库，而 Angular 是一个完整的模型视图控制器框架。

我们需要从远程端点调用 API 来访问外部资源，我们可以使用 Ajax 来配置请求并响应资源。

但限制是我们无法访问远程端点，所以我们需要第三方库（如 Axios）或内置库（如 Fetch）来使用来自服务器的数据。

在 React 中进行 Ajax 调用

我们知道，React 是一个基于 JavaScript 的库，它不具备发出 HTTP 请求的能力；因此，我们需要使用第三方库来实现这一点。

有许多库可用于对 React 应用进行 HTTP 调用。下面列出了其中一些。

Axios
拿来
超级代理
React-axios
使用-http
React-请求

支持更多第三方库来发出 HTTP 请求；我们可以选择任意一个..

使用 Axios 在 React 中发出 HTTP 调用

Axios 是一个基于promise的HTTP客户端，支持浏览器和node.js。

以下是 Axios 库的一些功能。

它用于从浏览器发出XMLHttpRequests 。
它从 node.js 平台发出 HTTP 请求。
它拦截请求和响应。
它会自动转换 JSON 特定的数据。
您可以随时取消请求。
它支持完整的基于promise的API。
它转换请求和响应数据。

我们可以看到，它支持许多功能；这就是为什么 Axios 是市场上使用最广泛的库之一。

让我们使用以下命令将 Axios 库安装到现有应用程序中。

      npm install axios

执行上述命令后，我们将能够将Axios库使用到现有的React应用程序中。

但如果我们不想使用npm package，那么我们也可以像这样将脚本导入到现有的应用程序中。

      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Axios 的基本语法如下所示。

      axios
.get("API_URL")
.then(response => {
    // manipulate the response here
})
.catch(function(error) {
    // manipulate the error response here
});
    

正如您在该语法中看到的，我们应该相应地传递 API URL，以便它可以访问远程端点从服务器获取数据。

从服务器获得适当的响应后，我们应该操作来自组件的响应，以便我们可以利用响应数据。

让我们直接进入一个示例，该示例展示了如何在 React 应用程序中使用 Axios，通过使用虚拟端点 URL 来获取要呈现的虚拟数据。

      async getTodos() {
    // Simple one
     let todos = await axios.get(
      "https://jsonplaceholder.typicode.com/todos?_page=1&_limit=10"
    );
    console.log(todos.data);
  }
    

在这个例子中，我们使用了 Axios 包和GET HTTP调用，并将 URL 作为参数提供。

但是如果我们从服务器获取响应怎么办？上面的示例中没有显示如何使用来自服务器的响应的部分，因此下面将连同响应部分一起给出解决方案。

      axios
.get("API_URL")
.then(response => {
    this.setState({ todos: response.data });
})
.catch(function(error) {
    console.log(error);
});
    

如果我们从服务器获得了预期的响应，则.then部分将管理响应。如果没有，那么我们还有一个名为.catch的附加部分，用于管理访问远程端点时的错误。

现在让我们访问响应对象的不同属性，像这样。

      async getTodos() {
// With all properties
    axios
        .get("https://jsonplaceholder.typicode.com/todos?_page=1&_limit=10")
        .then(response => {
            console.log(response.data);
            console.log(response.status);
            console.log(response.statusText);
            console.log(response.headers);
            console.log(response.config);
        })
        .catch(function(error) {
            console.log(error);
        });
}
    

我们已经访问了响应对象的不同属性，包括数据、状态、标头、配置和状态文本。我们可以利用这些属性来显示响应状态，如 200、404、502 等。

让我们通过此示例使用 Axios POST请求发布数据。

      async getTodos() {
    // With all properties
     let body = {
      userId: 1111,
      title: "This is POST request with body",
      completed: true
    };
    axios
      .post("https://jsonplaceholder.typicode.com/todos", body)
      .then(function(response) {
        console.log(response.data);
      })
      .catch(function(error) {
        console.log(error);
      });
}
    

在此示例中，我们使用了POST请求以及传递附加请求数据的 Axios 客户端将记录发布到服务器。

完整的示例如下。

      import React, { Component } from "react";
import axios from "axios";

class UsingAxios extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
    this.getTodos = this.getTodos.bind(this);
  }

    componentDidMount() {
        this.getTodos();
    }

    async getTodos() {
        // With all properties
        let body = {
        userId: 1111,
        title: "This is POST request with body",
        completed: true
        };
        axios
        .post("https://jsonplaceholder.typicode.com/todos", body)
        .then(function(response) {
            console.log(response.data);
        })
        .catch(function(error) {
            console.log(error);
        });
    }

    render() {
        const { todos } = this.state;
        return (
        <div>
            <h3>Using Axios in React for API call</h3>
            <hr />
        </div>
        );
    }
}

export default UsingAxios;
    

此示例显示我们将使用 Axios POST请求添加一个待办事项，绕过附加对象（即请求对象）。如果请求成功，则可以使用数据进行进一步的操作。

这就是为什么 Axios 是一个很好的基于承诺的 HTTP 客户端，可以进行基于 HTTP 的调用来从服务器访问数据或更新现有数据。

现在我们将使用一种不同的方法来发出 HTTP 请求，即fetch()。

在 React 中使用 Fetch 进行 HTTP 调用

Fetch 是基于浏览器的 API，广泛用于从应用程序进行 HTTP 调用，但不仅限于 React——它还可以从其他框架（如 Angular 或 Vuejs）中使用。

Fetch 是全球开发人员使用的一种现代方法，因为它支持所有现代浏览器，但我们必须记住，一些浏览器仍然不支持 Fetch，这是一个缺点。

我们来看看 Fetch API 的基本语法，它看起来像这样。

      let response = fetch(
    API_URL,
    [additioanl options]
);
    

此处的语法中，我们传递了API URL，这是从远程服务器获取数据所必需的。如果我们有其他请求类型，例如POST或PUT，那么我们也可以随 URL 传递其他参数。

我们可以像这样简单地将 URL 与 Fetch API 一起使用。

      let response = fetch("https://jsonplaceholder.typicode.com/users");
    

Fetch API 总是返回承诺，以便我们从远程服务器获得适当的响应后，可以将其解析为响应对象。

让我们通过一个简单的示例来看一下可以与 Fetch API 一起使用的附加选项。

      async getUsers() {
    // With additional headers
    const response = await fetch("https://jsonplaceholder.typicode.com/users", {
      method: "GET", // *Type of request GET, POST, PUT, DELETE
      mode: "cors", // Type of mode of the request
      cache: "no-cache", // options like default, no-cache, reload, force-cache
      credentials: "same-origin", // options like include, *same-origin, omit
      headers: {
        "Content-Type": "application/json" // request content type
      },
      redirect: "follow", // manual, *follow, error
      referrerPolicy: "no-referrer", // no-referrer, *client
      // body: JSON.stringify(data) // Attach body with the request
    });
    this.setState({ users: await response.json() });
  }
    

在此示例中，我们有一个简单的 API URL，但是除了该 URL 之外，我们还使用了各种参数。

方法：哪种类型的 HTTP 调用
Mode：请求模式的类型，即cors、no-cors等
Headers：附加请求标头，用于指定授权类型、请求的内容类型和其他选项
Body

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

_查看原文

技术指南

React框架

阅读全文

如何使用 React 处理 Ajax

杭州电子商务研究院

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

async getTodos() { // With all properties axios .get("https://jsonplaceholder.typicode.com/todos?_page=1&_limit=10") .then(response => { console.log(response.data); console.log(response.status); console.log(response.statusText); console.log(response.headers); console.log(response.config); }) .catch(function(error) { console.log(error); }); }

async getTodos() { // With all properties let body = { userId: 1111, title: "This is POST request with body", completed: true }; axios .post("https://jsonplaceholder.typicode.com/todos", body) .then(function(response) { console.log(response.data); }) .catch(function(error) { console.log(error); }); }

import React, { Component } from "react"; import axios from "axios"; class UsingAxios extends Component { constructor() { super(); this.state = { name: "React" }; this.getTodos = this.getTodos.bind(this); } componentDidMount() { this.getTodos(); } async getTodos() { // With all properties let body = { userId: 1111, title: "This is POST request with body", completed: true }; axios .post("https://jsonplaceholder.typicode.com/todos", body) .then(function(response) { console.log(response.data); }) .catch(function(error) { console.log(error); }); } render() { const { todos } = this.state; return ( <div> <h3>Using Axios in React for API call</h3> <hr /> </div> ); } } export default UsingAxios;

async getUsers() { // With additional headers const response = await fetch("https://jsonplaceholder.typicode.com/users", { method: "GET", // *Type of request GET, POST, PUT, DELETE mode: "cors", // Type of mode of the request cache: "no-cache", // options like default, no-cache, reload, force-cache credentials: "same-origin", // options like include, *same-origin, omit headers: { "Content-Type": "application/json" // request content type }, redirect: "follow", // manual, *follow, error referrerPolicy: "no-referrer", // no-referrer, *client // body: JSON.stringify(data) // Attach body with the request }); this.setState({ users: await response.json() }); }