Axios在React中消耗REST API-DEV365 开发者社区

介绍

今天，大多数应用程序构建了API的消耗数据。这些以API为中心的应用程序有多种方式和技术来向API提出请求。您如何在应用程序中消耗API？您使用什么技术？
在本文中，我们将研究Axios，这是一个基于Node.js和The Browser的第三方Promise HTTP客户库。我们将研究如何使用Axios向API提出HTTP请求。我们还将研究如何处理HTTP请求时如何处理错误。

什么是轴

Axios是一个基于Node.js和浏览器的第三方Promise Promise客户库。它是同构的（=它可以在浏览器和具有相同代码库的nodejs中运行）。在服务器端，它使用本机node.js http模块，而客户端（浏览器）使用xmlhttprequests。
Axios可以通过内容分发网络或CDN添加到您的项目中，也可以通过软件包管理器（例如NPM或YARN）安装它。 Axios可以在浏览器或Node.js环境中运行。

为什么要轴

这是一个非常受欢迎的库，用于提出HTTP请求。它非常易于使用并且具有很多功能。
它在React社区中也很受欢迎。它用于许多React项目。就个人而言，Bellow是Axios的一些重要优势，而不是传统的提取API。

发送请求时，Axios会自动表示数据，但Fetch API需要手动进行。
Axios比Fetch API具有更好的错误处理。使用AXIO的错误处理更好，因为不良响应（例如404或500）最终会导致承诺通过抛出例外情况拒绝。它可能会从400到500的范围丢弃错误。可以使用try-catch块轻松处理这些错误。
Axios允许取消请求和请求超时。它具有可用于取消请求的取消令牌。

入门

要开始，您需要在项目中安装Axios。您可以通过在项目中运行以下命令来执行此操作。

npm install axios

完成此操作后，您可以在项目中导入Axios并开始提出请求。

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

在上面的代码中，我们向API提出了请求。我们正在使用Axios对象的GET方法来提出请求。 GET方法将API的URL作为第一个参数。第二个参数是包含请求配置的对象。第三个参数是当请求成功时调用的回调函数。第四个参数是当请求失败时调用的回调函数。回调函数是可选的。您也可以使用then和catch方法分别处理响应和错误。

为了轻松使用，我总是创建一个Axios实例并使用它来提出请求。这是因为我可以为所有请求设置API的基本URL和标题。这使得向API提出请求变得容易。以下是如何创建Axios实例的示例。

在您的react项目的SRC目录中创建一个文件，并将其命名为client.js。此文件将包含Axios实例。
使用Axios对象的.create()方法创建Axios实例。 .create()方法将对象作为参数。该对象包含Axios实例的配置。配置对象可以包含以下属性。
baseURL属性是API的基本URL。这是将用于所有请求的URL。 headers属性是包含所有请求的标头的对象。 headers对象可以包含任何数量的标题。 headers对象是可选的。您还可以为每个请求设置标题。


// src/client.js
import axios from 'axios';

const Client = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com', // base URL of the API
  headers: {
    'Content-Type': 'application/json',
  },
});

export default Client;

提出要求

要提出请求，您需要导入Axios实例并使用它来提出请求。以下是如何使用Axios实例提出请求的示例。

import Client from './client';

const App = () => {
  const [todos, setTodos] = useState([]);

  useEffect( async () => {
    const {data} = await Client.get('/todos');
    setTodos(data);
  }, []);

  return (
    <div>
      <h1>Todos</h1>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
};

在上面的代码中，我们向API提出了请求。我们正在使用AXIOS实例的GET方法来提出请求。在这里，端点/todos用作URL，因为实例已经设置了基本URL。

处理错误

通常建议我们在消耗API的数据时管理错误，以帮助确定我们收到的错误。这些故障可能是由于发送不准确的数据，发送错误的API或遇到网络问题的结果。

我们可以使用.catch（）和.catch（）方法或使用try ... catch block for Async/等待Axios请求来处理Axios中的错误。

下面是如何使用try和catch块处理错误的示例。

import Client from './client';

const App = () => {
    const [todos, setTodos] = useState([]);
    const [error, setError] = useState(null);

    useEffect( async () => {
    try {
        const {data} = await Client.get('/todos');
        setTodos(data);
    } catch (error) {
        setError(error);
    }
    }, []);

};

结论

在本文中，我们查看了Axios，该Axios是基于Node.js和浏览器的第三方Promise http客户库。我们研究了如何使用AXIOS向API提出HTTP请求。我们还研究了如何处理HTTP请求时如何处理错误。

快乐黑客！

bentilthereð
您以前使用过Axios吗？你怎么看待这件事？在下面的评论部分中让我知道。

友善，分享并关注我们以获取更多信息。