資料結構
網路
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 次檢視
廣告