react中axios结合后端实现GET和POST请求方式

下面我就来详细讲解一下“React中Axios结合后端实现GET和POST请求方式”的完整攻略：

1. 引入Axios

在React项目中进行网络请求，一般需要先引入Axios库。可以使用以下命令来安装Axios：

npm install axios

安装完成后，在需要的组件中引入Axios：

import axios from "axios";

2. GET请求

2.1 发送GET请求

发送GET请求可以使用Axios.get(url[, config])方法。其中，url是请求的地址，config是可选参数，如请求头、请求参数等。下面是一个发送GET请求并输出返回数据的示例：

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

function App() {
  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/todos/1")
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  return <div>Hello World!</div>;
}

export default App;

2.2 在URL中传递参数

可以在URL中传递参数，如下面的示例所示：

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

function App() {
  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/todos", {
        params: {
          userId: 1
        }
      })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  return <div>Hello World!</div>;
}

export default App;

3. POST请求

3.1 发送POST请求

发送POST请求可以使用Axios.post(url[, data[, config]])方法。其中，url是请求的地址，data是请求的数据，config是可选参数，如请求头等。下面是一个发送POST请求并输出返回数据的示例：

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

function App() {
  useEffect(() => {
    axios.post("https://jsonplaceholder.typicode.com/posts", {
        title: "foo",
        body: "bar",
        userId: 1
      })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  return <div>Hello World!</div>;
}

export default App;

3.2 发送表单数据

可以发送表单数据，如下面的示例所示：

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

function App() {
  useEffect(() => {
    axios.post("https://jsonplaceholder.typicode.com/posts", 
      new FormData(document.querySelector("form")))
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  return (
    <div>
      <form>
        <input type="text" name="title" defaultValue="foo" /><br />
        <textarea name="body" defaultValue="bar"></textarea><br />
        <input type="hidden" name="userId" value="1" />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

在获取表单数据时，使用了HTML5的新特性FormData来获取表单数据。使用FormData的好处是可以自动将表单数据转换成合适的格式发送到服务器，而不需要手动构造请求数据。需要注意的是，当使用FormData时需要将Content-Type设置成multipart/form-data。

阅读剩余 65%