HTTP 請求方法與狀態碼

前言：構建可靠前端應用的 HTTP 通信基礎

在當今復雜的 Web 應用生態中，前端開發已遠超簡單的頁面構建，轉而成為與后端系統緊密交互的復雜體系。作為這一交互的核心機制，HTTP 協議承載著幾乎所有的前后端數據交換，其設計理念直接影響著應用的健壯性、擴展性與性能表現。

深入理解 HTTP 請求方法與狀態碼并非僅是理論知識，而是構建高質量前端應用的基礎技能。恰當的請求方法選擇關系到 API 的語義清晰度與一致性；準確的狀態碼處理則直接影響用戶體驗與錯誤恢復能力。

一、HTTP 請求方法全解析

1.1 基礎請求方法

GET 方法

// 基本 GET 請求
fetch('https://api.example.com/users').then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));// 帶查詢參數的 GET 請求
const params = new URLSearchParams({page: 1,limit: 10
});
fetch(`https://api.example.com/users?${params}`).then(response => response.json());

特性分析：

安全性：是安全的，不改變服務器狀態
冪等性：具有冪等性，多次請求結果一致
緩存：可被瀏覽器緩存
使用場景：數據檢索、查詢操作

POST 方法

// JSON 數據提交
fetch('https://api.example.com/users', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({name: 'Zhang San',email: 'zhangsan@example.com'})
})
.then(response => response.json())
.then(data => console.log(data));// 表單數據提交
const formData = new FormData();
formData.append('name', 'Zhang San');
formData.append('email', 'zhangsan@example.com');fetch('https://api.example.com/users', {method: 'POST',body: formData
})
.then(response => response.json());

特性分析：

安全性：非安全，會改變服務器狀態
冪等性：非冪等，多次請求可能產生多個資源
緩存：通常不被緩存
使用場景：創建資源、提交表單數據

1.2 進階請求方法

PUT 方法

// 完整替換資源
fetch('https://api.example.com/users/123', {method: 'PUT',headers: {'Content-Type': 'application/json'},body: JSON.stringify({name: 'Li Si',email: 'lisi@example.com',role: 'admin'})
})
.then(response => response.json());

特性分析：

安全性：非安全，會改變服務器狀態
冪等性：具有冪等性，多次請求結果一致
使用場景：替換現有資源

PATCH 方法

// 局部更新資源
fetch('https://api.example.com/users/123', {method: 'PATCH',headers: {'Content-Type': 'application/json'},body: JSON.stringify({email: 'new.lisi@example.com'})
})
.then(response => response.json());

特性分析：

安全性：非安全，會改變服務器狀態
冪等性：理論上非冪等，但實際實現常為冪等
使用場景：部分更新資源

DELETE 方法

// 刪除資源
fetch('https://api.example.com/users/123', {method: 'DELETE'
})
.then(response => {if (response.ok) {console.log('User deleted successfully');}
});

特性分析：

安全性：非安全，會改變服務器狀態
冪等性：具有冪等性，多次請求結果一致
使用場景：刪除資源

1.3 特殊請求方法

HEAD 方法

// 獲取資源元數據
fetch('https://api.example.com/large-file.zip', {method: 'HEAD'
})
.then(response => {console.log('Content size:', response.headers.get('Content-Length'));console.log('Last modified:', response.headers.get('Last-Modified'));
});

特性分析：

安全性：是安全的，不改變服務器狀態
冪等性：具有冪等性
使用場景：獲取資源頭信息而不傳輸資源內容

OPTIONS 方法

// 檢查服務器支持的方法和CORS
fetch('https://api.example.com/users', {method: 'OPTIONS'
})
.then(response => {console.log('Allowed methods:', response.headers.get('Allow'));console.log('CORS headers:', response.headers.get('Access-Control-Allow-Methods'));
});

特性分析：

安全性：是安全的，不改變服務器狀態
冪等性：具有冪等性
使用場景：CORS 預檢請求、探測服務器支持的方法

二、HTTP 狀態碼詳解與應用

2.1 成功狀態碼（2xx）

200 OK

fetch('https://api.example.com/users').then(response => {if (response.status === 200) {return response.json();}}).then(data => console.log('數據獲取成功:', data));

應用實踐：最常見的成功響應，表示請求已成功處理。

201 Created

fetch('https://api.example.com/users', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ name: 'Wang Wu' })
})
.then(response => {if (response.status === 201) {console.log('資源創建成功');console.log('新資源位置:', response.headers.get('Location'));}
});

應用實踐：資源創建成功，常見于 POST 請求后。

204 No Content

fetch('https://api.example.com/users/123', {method: 'DELETE'
})
.then(response => {if (response.status === 204) {console.log('資源刪除成功，無內容返回');// 在UI中更新刪除狀態document.getElementById('user-123').remove();}
});

應用實踐：操作成功但無內容返回，常用于 DELETE 操作。

2.2 重定向狀態碼（3xx）

301 Moved Permanently

fetch('https://example.com/old-page').then(response => {if (response.status === 301) {const newLocation = response.headers.get('Location');console.log('資源已永久移動到:', newLocation);return fetch(newLocation);}});

應用實踐：資源已永久移動到新位置，客戶端應更新書簽。

304 Not Modified

// 帶條件的 GET 請求
fetch('https://api.example.com/users', {headers: {'If-None-Match': '"e0023aa4f"','If-Modified-Since': 'Wed, 21 Oct 2023 07:28:00 GMT'}
})
.then(response => {if (response.status === 304) {console.log('內容未變更，使用緩存版本');return getCachedData('users');} else {return response.json();}
});

應用實踐：資源未修改，可使用客戶端緩存，提高性能。

2.3 客戶端錯誤狀態碼（4xx）

400 Bad Request

function submitUserData(userData) {fetch('https://api.example.com/users', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(userData)}).then(response => {if (response.status === 400) {return response.json().then(errors => {console.error('請求數據格式錯誤:', errors);displayValidationErrors(errors);});}return response.json();});
}function displayValidationErrors(errors) {// 在表單中顯示驗證錯誤Object.keys(errors).forEach(field => {const element = document.getElementById(`${field}-error`);if (element) {element.textContent = errors[field];element.classList.add('visible');}});
}

應用實踐：請求格式錯誤，前端應展示詳細錯誤信息指導用戶修正。

401 Unauthorized

fetch('https://api.example.com/protected-resource', {headers: {'Authorization': `Bearer ${localStorage.getItem('token')}`}
})
.then(response => {if (response.status === 401) {console.log('身份驗證失敗');// 重定向到登錄頁window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname);return;}return response.json();
});

應用實踐：未授權訪問，需要用戶重新登錄。

403 Forbidden

fetch('https://api.example.com/admin/settings', {headers: {'Authorization': `Bearer ${localStorage.getItem('token')}`}
})
.then(response => {if (response.status === 403) {console.log('權限不足');displayErrorMessage('您沒有訪問此資源的權限');return;}return response.json();
});function displayErrorMessage(message) {const errorBox = document.createElement('div');errorBox.className = 'error-message';errorBox.textContent = message;document.body.appendChild(errorBox);setTimeout(() => errorBox.remove(), 5000);
}

應用實踐：已認證但權限不足，展示友好錯誤信息。

404 Not Found

fetch('https://api.example.com/users/999').then(response => {if (response.status === 404) {console.log('請求的資源不存在');showNotFoundPage();return;}return response.json();});function showNotFoundPage() {document.getElementById('content').innerHTML = `<div class="not-found"><h2>資源未找到</h2><p>您請求的內容不存在或已被移除</p><a href="/">返回首頁</a></div>`;
}

應用實踐：資源不存在，顯示自定義 404 頁面提高用戶體驗。

429 Too Many Requests

// 實現請求限流控制
class ThrottledAPI {constructor(baseUrl, maxRequestsPerMinute) {this.baseUrl = baseUrl;this.maxRequestsPerMinute = maxRequestsPerMinute;this.requestCount = 0;this.resetTime = Date.now() + 60000;this.queue = [];}async request(endpoint, options = {}) {if (this.requestCount >= this.maxRequestsPerMinute) {console.log('請求被節流，加入隊列');return new Promise((resolve) => {this.queue.push(() => this.executeRequest(endpoint, options).then(resolve));});}return this.executeRequest(endpoint, options);}async executeRequest(endpoint, options) {this.requestCount++;if (Date.now() > this.resetTime) {this.requestCount = 1;this.resetTime = Date.now() + 60000;this.processQueue();}try {const response = await fetch(`${this.baseUrl}${endpoint}`, options);if (response.status === 429) {const retryAfter = response.headers.get('Retry-After') || 60;console.log(`請求頻率過高，${retryAfter}秒后重試`);await new Promise(resolve => setTimeout(resolve, retryAfter * 1000));return this.executeRequest(endpoint, options);}return response;} catch (error) {console.error('請求出錯:', error);throw error;}}processQueue() {while (this.queue.length > 0 && this.requestCount < this.maxRequestsPerMinute) {const request = this.queue.shift();request();}}
}// 使用示例
const api = new ThrottledAPI('https://api.example.com', 60);
api.request('/messages').then(response => response.json());

應用實踐：請求頻率超限，前端實現智能重試和節流邏輯。

2.4 服務器錯誤狀態碼（5xx）

500 Internal Server Error

fetch('https://api.example.com/process-data').then(response => {if (response.status === 500) {console.error('服務器內部錯誤');showErrorPage('服務器遇到問題，請稍后再試');// 上報錯誤到監控系統reportError({endpoint: 'process-data',status: 500,time: new Date().toISOString()});return;}return response.json();});function reportError(errorData) {fetch('https://log.example.com/client-errors', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(errorData)});
}

應用實踐：服務器內部錯誤，前端展示友好提示并上報監控。

503 Service Unavailable

let retryCount = 0;
const maxRetries = 3;function fetchWithRetry(url, options = {}) {return fetch(url, options).then(response => {if (response.status === 503) {const retryAfter = parseInt(response.headers.get('Retry-After') || '5', 10);if (retryCount < maxRetries) {retryCount++;console.log(`服務暫不可用，${retryAfter}秒后第${retryCount}次重試`);return new Promise(resolve => {setTimeout(() => {resolve(fetchWithRetry(url, options));}, retryAfter * 1000);});} else {showErrorPage('服務暫時不可用，請稍后再試');throw new Error('Maximum retry attempts reached');}}retryCount = 0;return response;});
}// 使用示例
fetchWithRetry('https://api.example.com/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));

應用實踐：服務暫不可用，實現指數退避重試機制提高可靠性。

三、HTTP 請求設計最佳實踐

3.1 RESTful API 設計與 HTTP 方法映射

// RESTful API 客戶端實現
class RestClient {constructor(baseUrl) {this.baseUrl = baseUrl;}async request(endpoint, method = 'GET', data = null) {const url = `${this.baseUrl}${endpoint}`;const options = {method,headers: {'Accept': 'application/json'}};if (data && (method === 'POST' || method === 'PUT' || method === 'PATCH')) {options.headers['Content-Type'] = 'application/json';options.body = JSON.stringify(data);}const response = await fetch(url, options);// 處理不同狀態碼if (response.status >= 200 && response.status < 300) {if (response.status === 204) return null; // No contentreturn response.json();} else {const error = await response.json().catch(() => ({}));throw new RequestError(response.status, error.message || response.statusText, error);}}// RESTful 資源操作方法getAll(resource) {return this.request(`/${resource}`);}getOne(resource, id) {return this.request(`/${resource}/${id}`);}create(resource, data) {return this.request(`/${resource}`, 'POST', data);}update(resource, id, data) {return this.request(`/${resource}/${id}`, 'PUT', data);}patch(resource, id, data) {return this.request(`/${resource}/${id}`, 'PATCH', data);}delete(resource, id) {return this.request(`/${resource}/${id}`, 'DELETE');}
}// 自定義錯誤類
class RequestError extends Error {constructor(status, message, data = {}) {super(message);this.name = 'RequestError';this.status = status;this.data = data;}
}// 使用示例
const api = new RestClient('https://api.example.com/v1');// 獲取用戶列表
api.getAll('users').then(users => console.log(users)).catch(error => {if (error.status === 401) {// 處理未授權錯誤} else {// 處理其他錯誤}});// 創建新用戶
api.create('users', { name: 'Zhang San', email: 'zhangsan@example.com' }).then(newUser => console.log('Created:', newUser)).catch(error => console.error('Error creating user:', error));

最佳實踐：

資源操作與 HTTP 方法一致性映射
統一錯誤處理機制
清晰的資源路徑設計

3.2 條件請求與緩存控制

// 實現基于緩存控制的高效請求
class CacheAwareClient {constructor() {this.etags = new Map();this.lastModified = new Map();}async fetch(url, options = {}) {const headers = options.headers || {};// 添加條件請求頭if (this.etags.has(url)) {headers['If-None-Match'] = this.etags.get(url);} else if (this.lastModified.has(url)) {headers['If-Modified-Since'] = this.lastModified.get(url);}const response = await fetch(url, { ...options, headers });// 更新緩存控制信息const etag = response.headers.get('ETag');if (etag) {this.etags.set(url, etag);}const lastMod = response.headers.get('Last-Modified');if (lastMod) {this.lastModified.set(url, lastMod);}// 處理 304 Not Modifiedif (response.status === 304) {console.log('資源未修改，使用緩存數據');return this.getCachedData(url);}// 緩存數據if (response.ok) {const data = await response.clone().json();this.cacheData(url, data);return data;}return response;}cacheData(url, data) {localStorage.setItem(`cache_data_${url}`, JSON.stringify(data));localStorage.setItem(`cache_time_${url}`, Date.now().toString());}getCachedData(url) {try {return JSON.parse(localStorage.getItem(`cache_data_${url}`));} catch (e) {console.error('緩存數據解析錯誤', e);return null;}}
}// 使用示例
const client = new CacheAwareClient();
client.fetch('https://api.example.com/data').then(data => console.log(data));

最佳實踐：

使用 ETag 和 If-None-Match 實現高效緩存控制
配合 Last-Modified 和 If-Modified-Since 保證數據時效性
客戶端智能緩存管理減少不必要的網絡傳輸

四、HTTP 請求安全與性能優化

4.1 跨域資源共享(CORS)與安全控制

// 前端 CORS 預檢檢測工具
function testCorsSupport(url, method = 'GET', headers = {}) {// 首先測試是否需要預檢請求const needsPreflight = method !== 'GET' && method !== 'HEAD' && method !== 'POST' || Object.keys(headers).some(h => !['accept', 'accept-language', 'content-language', 'content-type'].includes(h.toLowerCase())) ||(headers['content-type'] && !['application/x-www-form-urlencoded', 'multipart/form-data', 'text/plain'].includes(headers['content-type'].toLowerCase()));console.log('該請求' + (needsPreflight ? '需要' : '不需要') + ' CORS 預檢');if (needsPreflight) {// 發送預檢請求return fetch(url, {method: 'OPTIONS',headers: {'Access-Control-Request-Method': method,'Access-Control-Request-Headers': Object.keys(headers).join(',')}}).then(response => {console.log('預檢請求狀態:', response.status);if (response.ok) {const allowedMethods = response.headers.get('Access-Control-Allow-Methods');const allowedHeaders = response.headers.get('Access-Control-Allow-Headers');const allowCredentials = response.headers.get('Access-Control-Allow-Credentials');console.log('允許的方法:', allowedMethods);console.log('允許的頭信息:', allowedHeaders);console.log('允許憑證:', allowCredentials);// 檢查請求方法是否被允許if (allowedMethods && !allowedMethods.split(',').map(m => m.trim()).includes(method)) {throw new Error(`方法 ${method} 不被允許`);}// 檢查請求頭是否被允許const headersArray = allowedHeaders ? allowedHeaders.split(',').map(h => h.trim().toLowerCase()) : [];const missingHeaders = Object.keys(headers).filter(h => !headersArray.includes(h.toLowerCase()));if (missingHeaders.length > 0) {throw new Error(`以下請求頭不被允許: ${missingHeaders.join(', ')}`);}return true;} else {throw new Error(`預檢請求失敗: ${response.status}`);}});} else {console.log('不需要預檢請求，直接發送主請求');return Promise.resolve(true);}
}// 使用示例
testCorsSupport('https://api.example.com/data', 'PUT', { 'Content-Type': 'application/json', 'X-Custom-Header': 'value' }
)
.then(supported => {if (supported) {console.log('CORS 支持確認，可以安全發送請求');}
})
.catch(error => console.error('CORS 錯誤:', error.message));

4.2 性能優化與批量請求

// HTTP/2 多路復用請求優化
class OptimizedHttpClient {constructor(baseUrl) {this.baseUrl = baseUrl;this.pendingRequests = new Map();this.requestQueue = [];this.batchTimerId = null;this.batchDelay = 50; // 50ms 批處理延遲}async request(endpoint, options = {}) {const key = this.getRequestKey(endpoint, options);// 如果完全相同的請求正在處理中，復用 Promiseif (this.pendingRequests.has(key)) {return this.pendingRequests.get(key);}// 創建新請求 Promiseconst requestPromise = new Promise((resolve, reject) => {this.requestQueue.push({ endpoint, options, resolve, reject });// 設置批處理定時器if (!this.batchTimerId) {this.batchTimerId = setTimeout(() => this.processBatch(), this.batchDelay);}});// 存儲進行中的請求this.pendingRequests.set(key, requestPromise);// 請求完成后清理映射requestPromise.finally(() => {this.pendingRequests.delete(key);});return requestPromise;}async processBatch() {this.batchTimerId = null;if (this.requestQueue.length === 0) return;// 提取當前批次的請求const batch = this.requestQueue.splice(0, this.requestQueue.length);// 按資源類型分組請求const groupedRequests = this.groupRequestsByResource(batch);// 處理每個資源組for (const [resource, requests] of groupedRequests.entries()) {// 如果資源組中只有一個請求，直接發送if (requests.length === 1) {const req = requests[0];this.processSingleRequest(req.endpoint, req.options, req.resolve, req.reject);continue;}// 嘗試合并同類請求（例如，多個 GET 請求）if (this.canBatchRequests(requests)) {await this.sendBatchRequest(resource, requests);} else {// 無法批處理的請求單獨發送for (const req of requests) {this.processSingleRequest(req.endpoint, req.options, req.resolve, req.reject);}}}}getRequestKey(endpoint, options) {return `${options.method || 'GET'}-${endpoint}-${JSON.stringify(options.body || {})}`;}groupRequestsByResource(requests) {const groups = new Map();for (const req of requests) {// 提取資源類型（例如，/users, /products 等）const resource = req.endpoint.split('/')[1];if (!groups.has(resource)) {groups.set(resource, []);}groups.get(resource).push(req);}return groups;}canBatchRequests(requests) {// 檢查請求是否可以批處理（例如，都是 GET 或都是同類型請求）const method = requests[0].options.method || 'GET';return requests.every(req => (req.options.method || 'GET') === method);}async sendBatchRequest(resource, requests) {try {// 構建批處理請求const ids = requests.map(req => req.endpoint.split('/').pop()).filter(id => !isNaN(id));// 如果是批量獲取多個資源if (ids.length === requests.length) {const batchUrl = `${this.baseUrl}/${resource}?ids=${ids.join(',')}`;const response = await fetch(batchUrl);if (!response.ok) throw new Error(`Batch request failed: ${response.status}`);const data = await response.json();// 將批量響應分發回各個原始請求for (let i = 0; i < requests.length; i++) {const req = requests[i];const id = ids[i];const itemData = Array.isArray(data) ? data.find(item => item.id == id) : data[id];if (itemData) {req.resolve(itemData);} else {req.reject(new Error(`Resource ${id} not found in batch response`));}}} else {// 其他批處理場景for (const req of requests) {this.processSingleRequest(req.endpoint, req.options, req.resolve, req.reject);}}} catch (error) {// 批處理失敗，將錯誤傳遞給所有請求for (const req of requests) {req.reject(error);}}}async processSingleRequest(endpoint, options, resolve, reject) {try {const response = await fetch(`${this.baseUrl}${endpoint}`, options);if (!response.ok) {throw new Error(`Request failed with status ${response.status}`);}const data = await response.json();resolve(data);} catch (error) {reject(error);}}
}// 使用示例
const client = new OptimizedHttpClient('https://api.example.com');// 這些請求會被智能批處理
client.request('/users/1').then(data => console.log(data));
client.request('/users/2').then(data => console.log(data));
client.request('/users/3').then(data => console.log(data));

五、HTTP 狀態碼在前端路由中的應用

5.1 基于 HTTP 狀態碼的路由決策

// 狀態碼感知的前端路由器
class StatusAwareRouter {constructor() {this.routes = [];this.globalErrorHandlers = {401: null,403: null,404: null,500: null};}// 添加路徑與組件的映射addRoute(path, component) {this.routes.push({ path, component });return this;}// 設置特定狀態碼的全局處理組件setErrorHandler(statusCode, component) {if (this.globalErrorHandlers.hasOwnProperty(statusCode)) {this.globalErrorHandlers[statusCode] = component;}return this;}// 基于 API 響應狀態渲染合適的組件async resolveRoute(path, apiEndpoint) {// 查找匹配的路由const route = this.routes.find(r => r.path === path);if (!route) {return this.globalErrorHandlers[404] || (() => {return `<div class="error-page"><h1>404 - Page Not Found</h1><p>The requested page "${path}" does not exist.</p></div>`;});}// 如果提供了 API 端點，檢查權限和數據狀態if (apiEndpoint) {try {const response = await fetch(apiEndpoint, {credentials: 'include' // 包含認證信息});// 處理常見的錯誤狀態碼switch (response.status) {case 401: // 未認證return this.globalErrorHandlers[401] || (() => {// 保存當前路徑以便登錄后重定向回來localStorage.setItem('redirectAfterLogin', path);// 重定向到登錄頁window.location.href = '/login';return null;});case 403: // 權限不足return this.globalErrorHandlers[403] || (() => {return `<div class="error-page"><h1>403 - Forbidden</h1><p>You don't have permission to access this page.</p></div>`;});case 404: // API 資源不存在return this.globalErrorHandlers[404] || (() => {return `<div class="error-page"><h1>404 - Resource Not Found</h1><p>The requested resource does not exist.</p></div>`;});case 500: // 服務器錯誤case 502:case 503:case 504:return this.globalErrorHandlers[500] || (() => {return `<div class="error-page"><h1>Server Error</h1><p>Something went wrong. Please try again later.</p><button onclick="window.location.reload()">Retry</button></div>`;});}// 正常狀態，返回路由組件并傳入數據if (response.ok) {const data = await response.json();// 閉包捕獲 data，使路由組件可以使用 API 數據return () => route.component(data);}} catch (error) {console.error('Error fetching API data:', error);// 網絡錯誤或其他異常return () => `<div class="error-page"><h1>Connection Error</h1><p>Failed to connect to the server. Please check your internet connection.</p><button onclick="window.location.reload()">Retry</button></div>`;}}// 無需 API 檢查或數據，直接返回路由組件return route.component;}// 監聽瀏覽器歷史變化并渲染視圖listen(rootElement) {const renderCurrentRoute = async () => {const path = window.location.pathname;const apiPath = window.location.pathname.startsWith('/dashboard') ? `/api${path}` : null;const component = await this.resolveRoute(path, apiPath);if (component) {rootElement.innerHTML = typeof component === 'function' ? component() : component;}};// 初始渲染renderCurrentRoute();// 監聽歷史變化window.addEventListener('popstate', renderCurrentRoute);// 攔截鏈接點擊document.addEventListener('click', (e) => {if (e.target.tagName === 'A' && e.target.href.startsWith(window.location.origin) && !e.target.hasAttribute('external')) {e.preventDefault();const url = new URL(e.target.href);window.history.pushState({}, '', url.pathname);renderCurrentRoute();}});return {navigate: (path) => {window.history.pushState({}, '', path);renderCurrentRoute();}};}
}// 使用示例
document.addEventListener('DOMContentLoaded', () => {const router = new StatusAwareRouter();// 定義路由router.addRoute('/', () => '<h1>Home</h1>').addRoute('/dashboard', (data) => `<h1>Dashboard</h1><p>Welcome, ${data.user.name}!</p><ul>${data.items.map(item => `<li>${item.title}</li>`).join('')}</ul>`).addRoute('/settings', () => '<h1>Settings</h1>')// 設置錯誤處理.setErrorHandler(401, () => {localStorage.setItem('redirectAfterLogin', window.location.pathname);return '<h1>Please Login</h1><p>You need to login to view this page.</p>';}).setErrorHandler(403, () => '<h1>Access Denied</h1><p>You don\'t have permission to view this content.</p>').setErrorHandler(404, () => '<h1>Page Not Found</h1><p>The requested page does not exist.</p>');// 啟動路由const app = router.listen(document.getElementById('app'));// 導航示例document.getElementById('nav-home').addEventListener('click', () => {app.navigate('/');});
});

六、HTTP 深度分析與前沿技術

6.1 HTTP/2 與 HTTP/3 技術實踐

// HTTP 版本特性檢測與優化
class HttpVersionOptimizer {constructor() {this.supportInfo = {http2: undefined,http3: undefined};this.testResults = [];}// 檢測 HTTP/2 支持async detectHttp2Support() {try {const startTime = performance.now();const response = await fetch('https://example.com', {cache: 'no-store'});const endTime = performance.now();const httpVersion = response.headers.get('x-http-version') || response.headers.get('x-used-protocol') ||'unknown';const isHttp2 = httpVersion.includes('2') || httpVersion.includes('h2');this.testResults.push({type: 'http2',success: isHttp2,responseTime: endTime - startTime});this.supportInfo.http2 = isHttp2;return isHttp2;} catch (error) {console.error('Error detecting HTTP/2 support:', error);this.supportInfo.http2 = false;return false;}}// 檢測 HTTP/3 支持async detectHttp3Support() {try {const startTime = performance.now();const response = await fetch('https://cloudflare-http3.com', {cache: 'no-store'});const endTime = performance.now();const httpVersion = response.headers.get('alt-svc') || 'unknown';const isHttp3 = httpVersion.includes('h3') || httpVersion.includes('quic');this.testResults.push({type: 'http3',success: isHttp3,responseTime: endTime - startTime});this.supportInfo.http3 = isHttp3;return isHttp3;} catch (error) {console.error('Error detecting HTTP/3 support:', error);this.supportInfo.http3 = false;return false;}}// 基于 HTTP 版本優化連接管理optimizeConnections() {const result = {maxConnections: 6, // HTTP/1.1 默認值resourceHints: []};if (this.supportInfo.http2) {// HTTP/2 允許多路復用，減少連接數result.maxConnections = 1; // 為單域名優化為單連接result.resourceHints.push({type: 'preconnect',hint: 'Reduce connection count, HTTP/2 uses multiplexing'});} else {// 為 HTTP/1.1 分片資源到多個域名result.resourceHints.push({type: 'sharding',hint: 'Distribute resources across multiple domains for parallel downloads'});}if (this.supportInfo.http3) {// 利用 HTTP/3 的 0-RTT 恢復result.resourceHints.push({type: '0-rtt',hint: 'Enable 0-RTT session resumption for repeat visitors'});}return result;}// 為特定資源應用優化optimizeResourceLoading(resources) {// 獲取優化配置const config = this.optimizeConnections();const optimizedResources = [];for (const resource of resources) {const optimized = { ...resource };// 應用資源類型特定優化switch (resource.type) {case 'image':if (this.supportInfo.http2) {// 對于 HTTP/2，使用服務器推送optimized.hints = ['use-server-push'];} else {// 對于 HTTP/1.1，應用域名分片optimized.url = this.applySharding(resource.url);}break;case 'script':optimized.attributes = ['defer']; // 默認延遲加載腳本if (resource.critical) {optimized.hints = ['preload']; // 關鍵腳本預加載}break;case 'style':if (resource.critical) {optimized.hints = ['preload', 'critical']; // 關鍵樣式內聯}break;}optimizedResources.push(optimized);}return optimizedResources;}applySharding(url) {// 簡單的域名分片實現const urlObj = new URL(url);const domain = urlObj.hostname;const shard = Math.floor(Math.random() * 4) + 1; // 1-4 之間的隨機分片if (!domain.startsWith('shard')) {urlObj.hostname = `shard${shard}.${domain}`;}return urlObj.toString();}// 生成優化報告generateReport() {return {supportInfo: this.supportInfo,testResults: this.testResults,recommendations: [{id: 'connection-strategy',title: 'Connection Management Strategy',description: this.supportInfo.http2 ? 'Use a single connection for HTTP/2 enabled domains to leverage multiplexing': 'Use domain sharding for HTTP/1.1 connections to increase parallel downloads',importance: 'high'},{id: 'resource-prioritization',title: 'Resource Prioritization',description: this.supportInfo.http2 ? 'Utilize HTTP/2 stream priorities to load critical resources first': 'Properly sequence your resource loading to prioritize critical path rendering',importance: 'high'},{id: 'protocol-upgrade',title: 'Protocol Upgrade Options',description: !this.supportInfo.http2 ? 'Consider upgrading your server to support HTTP/2 for better performance': !this.supportInfo.http3 ? 'Consider enabling HTTP/3 for improved performance on lossy networks': 'Your server is using the latest HTTP protocol version',importance: !this.supportInfo.http2 ? 'high' : !this.supportInfo.http3 ? 'medium' : 'low'}]};}
}// 使用示例
async function optimizeWebsite() {const optimizer = new HttpVersionOptimizer();// 檢測 HTTP 版本支持await Promise.all([optimizer.detectHttp2Support(),optimizer.detectHttp3Support()]);console.log('HTTP Protocol Support:', optimizer.supportInfo);// 優化示例資源集const resources = [{ type: 'image', url: 'https://example.com/hero.jpg', critical: true },{ type: 'script', url: 'https://example.com/app.js', critical: true },{ type: 'script', url: 'https://example.com/analytics.js', critical: false },{ type: 'style', url: 'https://example.com/styles.css', critical: true }];const optimizedResources = optimizer.optimizeResourceLoading(resources);console.log('Optimized Resources:', optimizedResources);// 生成優化報告const report = optimizer.generateReport();console.log('Optimization Report:', report);return report;
}// 運行優化
optimizeWebsite().then(report => {// 在 UI 中展示優化建議displayOptimizationSuggestions(report);
});

前端調試 HTTP 的技巧

現代前端開發中，掌握 HTTP 請求的調試技巧至關重要。以下是一些實用技術和工具：

1. 瀏覽器開發者工具

// 使用控制臺 API 監控網絡請求
// 在開發環境中插入此腳本// 監聽所有 Fetch 請求
const originalFetch = window.fetch;
window.fetch = async function(...args) {const url = args[0];const options = args[1] || {};console.group(`🌐 Fetch Request: ${options.method || 'GET'} ${url}`);console.log('Request Options:', options);console.time('Response Time');try {const response = await originalFetch.apply(this, args);console.timeEnd('Response Time');// 克隆響應以便檢查內容（因為 body 只能讀取一次）const clonedResponse = response.clone();// 嘗試解析不同類型的響應let responseData;const contentType = response.headers.get('content-type') || '';if (contentType.includes('application/json')) {responseData = await clonedResponse.json().catch(e => 'Cannot parse JSON');} else if (contentType.includes('text/')) {responseData = await clonedResponse.text().catch(e => 'Cannot parse text');} else {responseData = `Binary data: ${contentType}`;}console.log('Response Status:', response.status, response.statusText);console.log('Response Headers:', Object.fromEntries([...response.headers.entries()]));console.log('Response Data:', responseData);console.groupEnd();return response;} catch (error) {console.timeEnd('Response Time');console.error('Request Failed:', error);console.groupEnd();throw error;}
};// 監聽 XMLHttpRequest
const originalXHROpen = XMLHttpRequest.prototype.open;
const originalXHRSend = XMLHttpRequest.prototype.send;XMLHttpRequest.prototype.open = function(method, url) {this._url = url;this._method = method;this._requestTime = Date.now();return originalXHROpen.apply(this, arguments);
};XMLHttpRequest.prototype.send = function(body) {console.group(`🌐 XHR Request: ${this._method} ${this._url}`);console.log('Request Payload:', body);this.addEventListener('load', function() {console.log('Response Status:', this.status);console.log('Response Time:', Date.now() - this._requestTime, 'ms');try {const contentType = this.getResponseHeader('Content-Type') || '';if (contentType.includes('application/json')) {console.log('Response:', JSON.parse(this.responseText));} else {console.log('Response:', this.responseText);}} catch (e) {console.log('Response: Unable to parse');}console.groupEnd();});this.addEventListener('error', function() {console.error('Request failed');console.log('Response Time:', Date.now() - this._requestTime, 'ms');console.groupEnd();});return originalXHRSend.apply(this, arguments);
};