如何使用带有React的Axios构建简单的博客：初学者教程

在本文中，我们将学习如何将Axios与React一起使用以发出API请求，以及如何处理响应。

我们将通过使用伪造的API服务器构建一个简单的博客来学习这一点。

什么是Axios？

Axios是一个JavaScript库，用于从NodeJS或浏览器发出HTTP请求。 这些包括POST，GET和许多其他形式的请求。 它可以在原始Javascript以及许多其他框架中使用，但是我们今天的用例是React 。

之前与API进行通信通常是通过访存API进行的。 Axios不会替代它，而只是使通信更容易。 它还具有更好的错误处理，轻松的标头配置，并且提高了代码的可读性。

根据NPM文档Axios公司的特点是：制作XMLHttpRequests从browserMake从node.js的HTTP请求自动转换为JSON的DataTransform请求和响应数据

您可以在npm文档中获得更多功能。

博客项目

我们将使用一种流行的公共API – http://jsonplaceholder.typicode.com/ 。 我们可以通过点击/ ​​posts端点获取帖子列表，通过/ post / id编辑和删除帖子，等等。 您可以检查站点以了解如何使用其端点。

创建一个项目文件夹并更改目录

要在React中使用Axios，您需要安装该软件包。 在执行此操作之前，我们需要我们的项目文件夹。 使用create-react-app快速设置项目。

安装软件包– npm install -g create-react-app

创建项目– create-react-app axios-with-react

更改目录– cd axios-with-react.

启动服务器– npm run start

转到浏览器并输入localhost:3000 ，

您会看到软件包为我们设置的项目。

安装Axios库

npm install axios --save

使用Axios发出请求

Axios处理请求方法，例如POST ， GET ， PUT ， DELETE ， PATCH等。我们将在项目中看到一些动作。

GET请求

将App.js的内容更改为以下内容

import React from 'react' ;
import './App.css' ;
import axios from 'axios' ;

class App extends React . Component  {
  state = {
    id :  '' ,
    title : '' ,
    body : '' ,
    data : []
  }
  
  componentDidMount() {
    axios.get( 'https://jsonplaceholder.typicode.com/posts' )
    .then( res => {
      let newData = res.data.slice( 0 , 5 );
      this .setState({
        id : newData[newData.length - 1 ].id + 1 ,
        data : newData
      }, () => console .log( this .state.id))
      console .log(newData)
    })
    .catch( err => console .log( "Couldn't fetch data. Error: " + err))
  }

  render() {

    return (
      < div className = 'ArticleContainer' >
         <h1>Simple blog with React</h1>
        <div className='AddArticle'>
          <b>id of article: </b&