資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學ReactJS 中使用 axios 傳送 HTTP 請求
在本文中，我們將學習如何在 React 應用中使用 **axios** 傳送和接收 HTTP 響應。
為什麼要使用 axios？
自動將響應轉換為 JSON 格式
易於使用且更安全
設定全域性 HTTP 攔截器
同時請求
安裝模組
npm install axios
或
yarn add axios
**npm** 是管理 React 包的節點包管理器，但 **yarn** 更安全、更快且更輕量。
傳送 GET 請求
https://jsonplaceholder.typicode.com/todos/1
**Jsonplaceholder** 是一個用於學習傳送請求過程的模擬 API。
示例
App.jsx
import React, { useEffect, useState } from 'react';
const App = () => {
const [data, setData] = useState(null);
const [fetchData, setFetch] = useState(false);
useEffect(() => {
if (fetchData) {
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then((res) => setData(res.data.title));
}
}, [fetchData]);
return (
<>
<h1>{data}</h1>
<button onClick={() => setFetch(true)}>Fetch Data</button>
</>
);
};
export default App;在上面的示例中，我們向 **jsonplaceholder** 傳送 GET 請求，並在接收到響應後立即將資料插入狀態。
axios 傳送的響應
輸出
這將產生以下結果。
傳送 POST 請求
https://jsonplaceholder.typicode.com/todos/1
**Jsonplaceholder** 是一個用於學習傳送請求過程的模擬 API。
示例
App.jsx
import React, { useEffect, useState } from 'react';
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 }),
};
axios.post('https://jsonplaceholder.typicode.com/posts', payload)
.then((res) => setData(res.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 請求，並在請求體中包含輸入欄位的值，並相應地顯示響應。
axios 傳送的響應
輸出
這將產生以下結果。
更新於：2021年3月18日
699 次瀏覽
廣告