React 中的 Axios：初学者指南

在科技行业，很多前端框架都很流行，React 就是其中之一。使用这个框架的任何后端语言都不容易。开发人员要与数据库进行通信必须遵循特定的规则，并且必须编写一定的代码行。

在 React 中，与后端服务器的通信是通过 HTTP 协议完成的。如果您是开发人员，那么您可能已经熟悉 XML Http Request 接口和 Fetch API。它允许您获取数据并发出 HTTP 请求。

这是 React 中与数据库通信的常用方法。在 React 中还有另一种与后端服务器通信的方法，这需要安装流行的库 Axios。

在本文中，我们将讨论这个库、它的主要特性，以及 Axios 在与数据库通信时如何在不同情况下工作。

Axios 简介： Axios 是一个流行的库，主要用于向 REST 端点发送异步 HTTP 请求。这个库对于执行 CRUD 操作非常有用。

1. 这个流行的库用于与后端通信。 Axios 支持 JS ES6 原生的 Promise API。
2. 使用 Axios，我们在应用程序中发出 API 请求。一旦提出请求，我们就会在 Return 中获取数据，然后我们在项目中使用这些数据。
3. 这个库在开发人员中很受欢迎。你可以在 GitHub 上查看，你会在上面找到 78k 颗星。

在安装 Axios 之前，您的 React 项目应用程序应该已准备好安装此库。按照下面给出的步骤创建一个 React 应用程序......

• 第 1 步：以下是在您的项目中创建 React 应用程序的命令……

  npx create-react-app new_files

• 第二步：进入第一步创建的目录。

  cd new_files

• 第 3 步：使用下面给出的命令安装 Axios 库……

  npm install axios

• 第 4 步：完成此操作后，您可以使用下面给出的命令启动服务器。

  npm start

安装 Axios 后，您可以将这个库导入到您的文件中，并使用它来发出 HTTP 请求。下面是在顶部导入库的文件的代码片段……

Javascript

import React from "react";
import axios from "axios";
    
class App extends React.Component {
  state = {
    newfiles: null,
  };
    
  handleFile(e) {
  
    // Getting the files from the input
    let newfiles = e.target.newfiles;
    this.setState({ newfiles });
  }
    
  handleUpload(e) {
    let newfiles = this.state.newfiles;
    
    let formData = new FormData();
    
    // Adding files to the formdata
    formData.append("image", newfiles);
    formData.append("name", "Name");
    
    axios({
  
      // Endpoint to send files
      url: "http://localhost:8080/files",
      method: "POST",
      headers: {
  
        // Add any auth token here
        authorization: "your token comes here",
      },
  
      // Attaching the form data
      data: formData,
    })
  
      // Handle the response from backend here
      .then((res) => { })
  
      // Catch errors if any
      .catch((err) => { });
  }
    
  render() {
    return (
      

        
Select your files
         this.handleFile(e)}
        />
         this.handleUpload(e)}>
          Send Files
        
      
    );
  }
}
    
export default App;

上面的例子只是一小段代码说明，展示了如何在你的项目中使用 Axios。我们将在下一节讨论 Axios 中的 GET、POST、PUT 等多种方法。

React 中 Axios 的需求：正如我们所讨论的，Axios 允许您与 React 项目中的 API 进行通信。使用 AJAX 也可以执行相同的任务，但 Axios 为您提供更多功能和特性，帮助您快速构建应用程序。

Axios 是一个基于 Promise 的库，所以需要实现一些基于 Promise 的异步 HTTP 请求。 jQuery 和 AJAX 也执行相同的工作，但在 React 项目中，React 在其自己的虚拟 DOM 中处理所有内容，因此根本不需要使用 jQuery。

下面是一个使用 Axios 获取客户数据的示例……

Javascript

const getCustomersData = () => {
  axios
  .get("https://jsonplaceholder.typicode.com/customers")
  .then(data => console.log(data.data))
  .catch(error => console.log(error));
  };
 getCustomersData();

现在让我们进入下一点，了解如何执行不同的操作，例如使用 Axios (GET-POST-DELETE) 获取数据或使用数据。

使用 Axios 获取请求：创建一个组件 MyBlog 并将其挂钩到组件DidMount 生命周期中。在顶部导入Axios 并使用 Get 请求获取数据。

Javascript

import React from 'react';
 import axios from 'axios';
 export default class MyList extends React.Component {
  state = {
    blogs: []
  }
  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/posts`)
    .then(response => {
      const posts = response.data;
      this.setState ({posts});
    })
  }
 render() {
  return (
   < ul >
     {this.state.posts.map (post =>  {post.title} )}
   < /ul >
  )}
 }

在这里，我们使用 axios.get (URL) 来获取返回响应对象的 Promise。返回的响应被分配给帖子的对象。我们还可以检索其他信息，例如状态码等。

使用 Axios 的 POST 请求：为 Post 请求创建一个新组件 AddPost。此请求会将帖子添加到帖子列表中。

Javascript

import React from 'react';
import axios from 'axios';
export default class AddPost extends React.Component {
   state = {
     postTitle: '',
   }
   handleChange = event => {
     this.setState({ postTitle: event.target.value });
   }
   handleSubmit = event => {
     event.preventDefault();
       const post = {
         postName: this.state.postName
       };
     axios.post(
`https://jsonplaceholder.typicode.com/posts`, { post })
       .then(res => {
         console.log(res);
         console.log(res.data);
     })
     [Text Wrapping Break] 
     }
    render() {
         return (
         

           

             
               Post Name:
               
             
             Add
          
        
 )}}

在上面的代码中，我们发出了一个 HTTP Post 请求，并在数据库中添加了一个新的 post。 onChange 事件触发方法 handleChange() 并在 API 请求成功返回数据时更新请求。

使用 Axios 删除请求：使用 axios.delete 向服务器发送删除请求。您需要在发出此请求 URL 和可选配置时指定两个参数。

axios.delete(url, { 
  data: { foo: "bar" }, 
  headers: { "Authorization": "******" } 
}); 

在发送删除请求时，您必须设置请求正文和标头。为此目的使用 config.data。在上面的 POST 请求中，修改代码如下...

Javascript

handleSubmit = event => {
  event.preventDefault();
  axios.delete(
`https://jsonplaceholder.typicode.com/posts/${this.state.postName}`)
  .then(res => {
  console.log(res);
  console.log(res.data);
  })
}

Axios 中的响应对象：当您向服务器发送请求时，您会从服务器接收到具有以下属性的响应对象……

• 数据：您以有效负载形式从服务器接收数据。此数据以 JSON 形式返回，并解析回一个 JavaScript 对象给您。
• 状态：您获得从服务器返回的 HTTP 代码。
• statusText：服务器返回的 HTTP 状态消息。
• 标头：所有标头都由服务器发回。
• config：原始请求配置。
• request：实际的 XMLHttpRequest 对象。

错误对象：如果请求有问题，您将得到一个错误对象。 Promise 将被一个具有以下属性的错误对象拒绝。

• 消息：错误消息文本。
• response：响应对象（如果收到）。
• request：实际的 XMLHttpRequest 对象（在浏览器中运行时）。
• config：原始请求配置。

Axios 库的特点

• JSON 数据会自动转换。
• 它转换请求和响应数据。
• 在从 Node.js 发出 HTTP 请求时很有用
• 它从浏览器发出 XMLHttpRequests。
• 为防止 XSRF提供客户端支持。
• 支持承诺 API。
• 能够取消请求。

Axios 中的速记方法：下面是一些 Axios 的速记方法……

• axios.request（配置）
• axios.head(url[, 配置])
• axios.get(url[, 配置])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.delete(url[, 配置])
• axios.options(url[, 配置])
• axios.patch(url[, data[, config]])

结论

这篇文章解释了关于 Axios 库的一切。我们已经讨论了一些有用的操作，例如获取数据、发布数据、更新数据或删除 Axios 中的数据。一旦你开始使用 React，你将不得不使用这个库与数据库服务器进行通信。因此，实践它并了解 Axios 中的工作原理非常重要。