可以將Axios攔截器封裝成一個單獨的request檔案，以便在整個應用程式中重復使用，
以下是一個示例，展示如何將Axios攔截器封裝成一個request檔案：
1、創建一個名為request.js的新檔案，并匯入Axios：
import axios from 'axios';
2、創建一個名為request的函式，并將其匯出：
這將創建一個名為request的函式，并將其設定為具有基本URL的新的Axios實體，要在封裝的Axios實體中添加超時設定，可以在創建Axios實體時傳遞timeout選項，
export const request = axios.create({ baseURL: 'https://example.com/api', timeout: 5000, // 超時設定為5秒 });
3、在request函式中添加攔截器：
request.interceptors.request.use(function (config) { // 在發送請求之前做些什么 return config; }, function (error) { // 對請求錯誤做些什么 return Promise.reject(error); }); request.interceptors.response.use(function (response) { // 對回應資料做點什么 return response; }, function (error) { // 對回應錯誤做點什么 return Promise.reject(error); });
這將添加一個請求攔截器和一個回應攔截器，可以在這些攔截器中執行需要的操作，例如在請求發送之前添加身份驗證標頭或在回應回傳后檢查回應資料是否有誤，
4、最后，匯出request函式：
export default request;
5、現在可以在應用程式中使用request函式來執行網路請求，并且每個請求都將經過預定義的攔截器，例如：
import request from './request'; request.get('/users') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
這將使用封裝的Axios實體發出GET請求，然后使用預定義的攔截器處理回應
完整示例：
要在發送請求之前攜帶Token和Username，可以使用請求攔截器來為所有請求添加身份驗證標頭，
請求攔截器檢查localStorage中是否存在名為“token”和“username”的值，并將其添加為Authorization和Username標頭，根據實際情況調整這些標頭的名稱和值，
要對回應資料進行操作，使用回應攔截器，在上面的示例中，回應攔截器檢查回應資料中的“status”屬性是否為“success”，如果不是，則將其視為錯誤，并將其作為例外拋出，例外包含回應物件，其中包含所有回應資訊，例如回應頭、狀態碼和回應體，可以根據實際情況調整這些檢查和例外拋出的邏輯，
import axios from 'axios'; export const request = axios.create({ baseURL: 'https://example.com/api', timeout: 5000, // 超時設定為5秒 }); request.interceptors.request.use(function (config) { // 在發送請求之前添加身份驗證標頭 config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`; config.headers.Username = localStorage.getItem('username'); return config; }, function (error) { // 對請求錯誤做些什么 return Promise.reject(error); }); request.interceptors.response.use(function (response) { // 對回應資料做些什么 const responseData =https://www.cnblogs.com/beichengshiqiao/archive/2023/04/21/ response.data; if (responseData.status !== 'success') { const error = new Error(responseData.message || '請求失敗'); error.response = response; throw error; } return responseData.data; }, function (error) { // 對回應錯誤做些什么 return Promise.reject(error); });
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550751.html
標籤：其他
上一篇：華為云 OpenTiny 跨端、跨框架企業級開源組件庫專案落地實踐直播即將開啟！
下一篇：返回列表