5.1 Fetch API
在 JavaScript 中執行 HTTP 請求時，常用的有兩個 library： 內建的 fetch 函數 和第三方 Axios library。 它們都提供了強大又靈活的方式與 API 和其他網路資源互動。
Fetch API 是瀏覽器內建的執行 HTTP 請求的方法。 它基於 Promise 提供了靈活而現代的處理網路請求的方式。
簡單的 fetch 請求語法：
let promise = fetch(url, {method, headers,
body})
Fetch 的基本概念：
fetch(url, options): 執行 HTTP 請求的主要方法- 返回一個 Promise，解析成 Response 對象
使用 Fetch 的簡單 GET 請求範例：
JavaScript
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
if (!response.ok) {
throw new Error('網路錯誤：從伺服器收到不正確的回應');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('執行請求時發生錯誤: ', error);
});
使用 Fetch 的 POST 請求範例：
JavaScript
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
})
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('執行請求時發生錯誤: ', error);
});
Fetch 設定
Fetch API 允許通過 options 對象設置多種請求參數，如方法、標頭、請求體等。
JavaScript
const options = {
method: 'GET', // 或 'POST', 'PUT', 'DELETE' 等
headers: {
'Content-Type': 'application/json'
},
// body: JSON.stringify(data) // 用於 POST 和 PUT 請求
};
fetch('https://jsonplaceholder.typicode.com/posts/1', options)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('執行請求時發生錯誤: ', error));
5.2 Axios Library
Axios 是一個在 JavaScript 中執行 HTTP 請求的熱門 library。與原生的 Fetch API 相比，它提供了更便捷和強大的 API， 並支持許多附加功能，如自動轉換 JSON、處理超時、中止請求以及支持舊版瀏覽器。
安装 Axios
Axios 可以通過 npm 安裝或通過 CDN 連接。
通過 npm 安裝：
Terminal
npm install axios
在 Node.js 中或使用模組打包工具（例如 Webpack）連接：
JavaScript
// 對於 CommonJS
const axios = require('axios');
// 對於 ES6 模組
import axios from 'axios';
通過 CDN 在瀏覽器中連接：
HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
簡單 GET 請求語法：
let promise = axios.get(url)
簡單 POST 請求語法：
let promise = axios.post(url, data, config)
Axios 的基本概念：
- axios(config): 執行 HTTP 請求的主要方法
- 接受配置對象，可包含
url、method、headers、data和其他參數。 - 快捷方法: Axios 提供每一個 HTTP 方法的專用方法（
axios.get、axios.post、axios.put、axios.delete等），簡化對應請求的執行。 - Promise: 所有 Axios 方法都返回 Promise，解析為回應對象或在發生錯誤時拒絕。
簡單 GET 請求與回應、錯誤處理語法：
JavaScript
axios.get(url)
.then(response => {
// 成功回應處理
})
.catch(error => {
// 錯誤處理
});
簡單 POST 請求與回應、錯誤處理語法：
JavaScript
axios.post(url, data, config)
.then(response => {
// 成功回應處理
})
.catch(error => {
// 錯誤處理
});
使用 Axios 的簡單 GET 請求範例：
HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
JavaScript
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('執行請求時發生錯誤: ', error);
});
使用 Axios 的 POST 請求範例：
HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
JavaScript
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'foo',
body: 'bar',
userId: 1
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('執行請求時發生錯誤: ', error);
});
5.3 配置 Axios
設定 Axios
Axios 可以透過 config 對象配置 HTTP 請求，包括 url、method、headers 和 data 等參數。 以下是請求配置的基本範例：
HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
JavaScript
const config = {
method: 'get', // 可以是 'get', 'post', 'put', 'delete' 等
url: 'https://jsonplaceholder.typicode.com/posts/1',
headers: {
'Content-Type': 'application/json' // 指定數據類型的標頭
},
// data: JSON.stringify(data) // 用於 POST 和 PUT 請求以傳送請求體
};
axios(config)
.then(response => console.log(response.data))
.catch(error => console.error('執行請求時發生錯誤: ', error));
Axios 的更多功能：
- 請求參數: 可以在URL中傳遞請求參數。
- 中止請求: 使用
AbortController。 - 超時: 設置請求的超時間隔。
使用請求參數的範例：
HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
JavaScript
axios.get('https://jsonplaceholder.typicode.com/posts', {
params: {
userId: 1 // 請求參數通過 params 對象傳遞
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('執行請求時發生錯誤: ', error);
});
5.4 Fetch 和 Axios 比較
現在讓我們比較 Fetch 和 Axios 的關鍵指標：
1. 使用簡單性：
- Fetch: 對於基礎操作使用簡單，但複雜情境（如 JSON 轉換、超時處理）需額外處理。
- Axios: 提供的 API 更便利且強大來執行複雜請求。
2. JSON 支持：
- Fetch: 需要明確調用
response.json()將響應體轉換為 JSON。 - Axios: 自動轉換 JSON 響應。
3. 超時：
- Fetch: 沒有內建的超時支持。 需使用
AbortController或包裝器來實現超時。 - Axios: 透過配置支持設置超時。
4. 拦截器：
- Fetch: 不支持請求和響應拦截器。
- Axios: 允許使用拦截器在發送請求之前和獲得響應之後執行邏輯。
Axios 中的拦截器範例
Interceptors (拦截器) 允許在發送請求之前或獲得響應之後執行特定動作：
HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
JavaScript
// 添加請求拦截器
axios.interceptors.request.use(config => {
console.log('請求已發送到伺服器: ', new Date());
return config;
}, error => {
return Promise.reject(error);
});
// 添加回應拦截器
axios.interceptors.response.use(response => {
console.log('從伺服器收到回應: ', new Date());
return response;
}, error => {
return Promise.reject(error);
});
// 含拦截器的請求範例
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => console.log(response.data))
.catch(error => console.error('執行請求時發生錯誤: ', error));
使用 Axios 進行平行請求
借助 Axios，可以很容易地執行平行請求並使用 Promise.all() 處理結果：
HTML
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
JavaScript
Promise.all([
axios.get('https://jsonplaceholder.typicode.com/todos/1'),
axios.get('https://jsonplaceholder.typicode.com/todos/2')
])
.then(responses => {
responses.forEach(response => {
console.log(response.data);
});
})
.catch(error => console.error('執行請求時發生錯誤: ', error));
GO TO FULL VERSION