Vue是一款主流的JavaScript框架，提供了很多实用的API函数，其中包括了fetch函数，可以在开发中进行数据请求操作。在Vue开发时，我们为了方便处理数据请求，可以对fetch函数进行封装，以优化请求的代码量和实现代码复用。

在封装fetch函数之前，我们需要了解fetch函数本身的使用方法和特性。fetch是一种新的网络请求API，可以替代XMLHttpRequest进行数据请求操作。它实质上是一种基于Promise的封装，通过fetch函数返回的Promise对象，我们可以链式调用then和catch方法进行成功和失败响应的处理。

fetch('https://example.com', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.then((response) =>{
return response.json();
})
.then((data) =>{
console.log(data);
})
.catch((error) =>{
console.log(error);
});

在封装fetch函数时，我们首先需要创建一个util文件，在该文件下编写fetch封装函数。我们可以将fetch函数的基本配置选项通过参数传递进来，同时利用Promise对象封装函数结果，统一返回成功和失败的响应结果。

function fetchAPI(api, options = {}) {
return new Promise((resolve, reject) =>{
fetch(api, options)
.then(response =>response.json())
.then(data =>resolve(data))
.catch(error =>reject(error));
});
}

可以看出，该函数接受两个参数，第一个参数为API接口地址，第二个参数为请求配置参数，也就是fetch函数中的第二个参数。通过Promise对象的resolve和reject方法，我们可以将请求操作的成功和失败响应结果返回给调用者。

在工程中，一个良好的代码结构应该是将所有的API请求都归总到一个apis.js文件中，而在该文件中所有的请求都是基于上述的fetchAPI函数进行封装的。

import { fetchAPI } from './utils';
export const getUserInfo = () =>{
return fetchAPI('/api/user/info');
};
export const getCityWeather = (city) =>{
return fetchAPI(`https://example.com/weather?city={city}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
});
};

可以看出，每个API请求都以统一的fetchAPI函数进行封装，轻松实现API的复用，同时提高开发效率。使用Promise对象和then方法，我们可以在成功和失败的情况下进行响应处理，比如将数据渲染到界面上或者提示用户网络请求失败。

在实际开发中，我们可以根据实际情况为fetchAPI函数进行扩充，比如为请求头部添加Token验证或者配置跨域访问允许。封装fetch函数能够让我们轻松优化API请求的代码量，提高代码复用率，加快开发速度，使Vue开发更加便捷。