下面我就来详细讲解一下“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。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:react中axios结合后端实现GET和POST请求方式 - Python技术站