数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究在 ReactJS 中发送 Http 请求
在本文中，我们将学习如何在 React 应用程序中发送和接收 Http 响应。
要发送或接收数据，我们不需要使用第三方包，而是可以使用 **fetch()** 方法，该方法现在已得到所有现代浏览器的支持。
发送 GET 请求
https://jsonplaceholder.typicode.com/todos/1
**Jsonplaceholder** 是一个用于学习发送请求过程的模拟 API。
示例
index.jsx
import React from "react";
import ReactDOM from "react-dom";
import { CookiesProvider } from "react-cookie";
import App from "./App";
ReactDOM.render(
<CookiesProvider>
<App />
</CookiesProvider>,
document.getElementById('root')
);App.jsx
import React, { useEffect, useState } from 'react';
const App = () => {
const [data, setData] = useState(null);
const [fetchData, setFetch] = useState(false);
useEffect(() => {
if (fetchData) {
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then((response) => response.json())
.then((data) => setData(data.title));
}
}, [fetchData]);
return (
<>
<h1>{data}</h1>
<button onClick={() => setFetch(true)}>Fetch Data</button>
</>
);
};
export default App;在上面的示例中，我们向 **jsonplaceholder** 发送 GET 请求，并访问将要插入状态中的数据，一旦收到响应，该数据就会被插入状态。
输出
这将产生以下结果。
发送 POST 请求
https://jsonplaceholder.typicode.com/todos/1
**Jsonplaceholder** 是一个用于学习发送请求过程的模拟 API。
示例
index.jsx
import React from "react";
import ReactDOM from "react-dom";
import { CookiesProvider } from "react-cookie";
import App from "./App";
ReactDOM.render(
<CookiesProvider>
<App />
</CookiesProvider>,
document.getElementById('root')
);App.jsx
import React, { useEffect, useState } from 'react';
import Input from './Input';
import './App.css';
const App = () => {
const [data, setData] = useState(null);
const [val, setVal] = useState('');
const [fetchData, setFetch] = useState(false);
useEffect(() => {
if (fetchData) {
const payload = {
method: 'POST',
body: JSON.stringify({ title: val }),
};
fetch('https://jsonplaceholder.typicode.com/posts', payload)
.then((res) => res.json())
.then((data) => setData(data.id));
}
}, [fetchData]);
return (
<>
{data && <h1>Your data is saved with Id: {data}</h1>}
<input
placeholder="Title of Post"
value={val}
onChange={(e) => setVal(e.target.value)}
/>
<button onClick={() => setFetch(true)}>Save Data</button>
</>
);
};
export default App;在上面的示例中，我们向 **jsonplaceholder** 发送 POST 请求，并在主体中使用输入字段值，并相应地显示响应。
输出
这将产生以下结果。
更新于: 2021年3月19日
912 次查看
广告