AJAX 是一種重要的前端技術，可以使網頁實現異步加載和數據交互，提升用戶體驗。然而，有時候在使用 AJAX 進行數據請求時，服務器返回了一個 302 狀態碼，表示臨時重定向。這時，我們需要對 AJAX 進行封裝處理 302，以達到理想的功能和用戶體驗。 封裝處理 302 的方法有很多種，下面我們將結合實際例子來探討一些常見的封裝處理方式。 早在 Classic ASP 時代，我曾遇到這樣一個場景：在用戶登錄操作時，如果用戶的登錄狀態過期，服務器會返回一個 302 狀態碼，并將用戶重定向到登錄頁面，要求用戶重新登錄。當時的前端技術還不如今發達，我使用的是 XMLHTTP 對象發起 AJAX 請求。在處理這種情況時，我會在 AJAX 請求的 onreadystatechange 事件中判斷響應的狀態碼，如果是 302，我就使用 JavaScript 代碼修改當前頁面的 URL，將用戶重定向到登錄頁面。 ```javascript xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { // 處理請求成功的邏輯 } else if (xhr.status === 302) { // 處理 302 重定向邏輯 window.location.href = xhr.getResponseHeader('Location'); } else { // 處理其他錯誤邏輯 } } }; ``` 隨著前端技術的發展，封裝處理 302 的方法也有了更多選擇?，F在，我們常用的前端框架 Vue.js 和 React.js 都提供了封裝處理 302 的功能。以 Vue.js 為例，可以使用 axios 庫來發起 AJAX 請求，并利用其攔截器（interceptor）來處理 302 重定向。 ```javascript // 創建 axios 實例 const axiosInstance = axios.create(); // 請求攔截器 axiosInstance.interceptors.request.use( config =>{ // 在請求發送之前進行處理 // 可以添加認證信息、設置請求頭等 return config; }, error =>{ // 處理請求錯誤 return Promise.reject(error); } ); // 響應攔截器 axiosInstance.interceptors.response.use( response =>{ // 在接收到響應數據之前進行處理 // 可以處理返回的數據、錯誤信息等 return response; }, error =>{ // 處理響應錯誤 if (error.response.status === 302) { // 處理 302 重定向邏輯 window.location.href = error.response.headers.location; } return Promise.reject(error); } ); // 發起 AJAX 請求 axiosInstance.get('/api/data').then(response =>{ // 處理請求成功的邏輯 }).catch(error =>{ // 處理其他錯誤邏輯 }); ``` 通過使用攔截器，我們可以在發起 AJAX 請求之前進行處理，并在接收到響應數據之前進行處理。當服務器返回 302 狀態碼時，就能在響應攔截器中觸發邏輯，將用戶重定向到指定頁面。 以上是兩種常見的封裝處理 302 的方法，每種方法都有各自的適用場景。在實際開發中，可以根據具體需求選擇合適的方法。封裝處理 302 可以提高 AJAX 請求的健壯性和用戶體驗，將用戶引導至正確的頁面，有效避免因登錄狀態過期而導致的錯誤。