在前端代碼開發中，經常需要用fetch來請求接口數據，但是每次都要寫重復的請求方式和處理邏輯十分費時間，這時候封裝一個fetch請求的函數就顯得尤為重要。

我們可以使用Vue框架來封裝fetch請求，在此基礎上封裝一個基于promise的方法，可以輕松地管理網絡請求錯誤處理和請求數據的狀態。

//封裝的Vue Fetch方法
function VueFetch(url, method = "GET", data = null, headers = {}) {
let token = localStorage.getItem("token"); // 添加任意請求頭
if (token) headers.Authorization = token;
let options = {
method: method,
headers: headers,
};
if (data) {
options.body = JSON.stringify(data);
headers["Content-Type"] = "application/json";
headers.Accept = "application/json";
} else {
headers.Accept = "application/json";
}
return fetch(url, options).then((response) =>{
if (!response.ok) {
throw response;
}
return response.json();
});
}

在封裝方法中，我們可以設置一個請求頭，它是一個包含http請求的頭部信息的對象，可以在發起請求的時候攜帶一些附加的數據，例如Token令牌，可以用來自動登錄，或者設置Content-Type，請求接口需要的數據類型等。

使用封裝的Vue Fetch方法調用到請求的API時，可以根據返回值、狀態碼進行邏輯處理。

//在Vue組件中使用方法
methods: {
async getData(id) {
try {
const response = await VueFetch(
`https://api.github.com/users/${id}`
);
console.log(response);
} catch (error) {
console.log("Error", error);
}
},
},

在Vue組件中，我們可以使用async和await方法輕松處理異步操作，當請求成功時，我們可以使用前端框架提供的方法進行頁面渲染，當請求失敗時，可以根據返回對象的狀態碼進行邏輯處理，例如404頁面的跳轉。

總的來說，將fetch請求方法封裝為Vue Fetch方法可以提高前端開發效率和代碼重用性，并且可以通過添加請求頭來實現一些通用操作，例如自動登錄功能。