vue项目中使用fetch的实现方法

fetch的由来和定义 fetch的由来      众所周知，传统 Ajax （指 XMLHttpRequest）是最早出现的发送异步请求技术，其核心是使用XMLHttpRequest对象。但是它也存在一些令人头疼的问题：XHR 是一个设计粗糙的 API，不符合关注分离的原则；配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。而Fetch 的出现就是为了解决 XHR 存在的问题。 fetch的定义和使用 MDN中的描述：   Fetch API 提供了一个获取资源的接口（包括跨域请求）。任何使用过 X 【Vue项目中使用fetch的实现方法】 在Vue项目中，fetch API被广泛用来替代传统的XMLHttpRequest（XHR）进行异步数据交互，因为它提供了一种更简洁、更现代化的方式来处理网络请求。fetch API的设计旨在解决XHR的一些痛点，如不清晰的API、混乱的调用方式以及与现代JavaScript异步编程模式的不兼容。 **fetch的由来和定义** Fetch API是为了解决XMLHttpRequest的不足而诞生的，它提供了一个更为抽象且强大的接口，用于获取网络资源，包括跨域请求。与XHR相比，Fetch API更符合关注分离的原则，同时支持Promise，使得异步操作更加直观。fetch的核心包括Request、Response、Headers和Body等概念，其中全局fetch方法接受一个输入（URL或Request对象）和一个可选的配置对象，返回一个Promise，这使得处理请求结果变得更加简单。 **fetch的优点和缺点** 优点： 1. **简洁的语法**：fetch的API设计更简洁，使代码更易读。 2. **基于Promise**：fetch返回Promise，支持async/await，提高了异步代码的可读性和可维护性。 3. **丰富的API**：提供了对Request、Response等的更底层控制，方便进行同构开发。 4. **脱离XHR**：fetch不依赖于XMLHttpRequest，是原生JavaScript API，提供了更多灵活性。 缺点： 1. **错误处理**：fetch将所有HTTP错误状态视为成功，只有网络问题才会导致请求失败，需手动处理错误状态。 2. **默认不携带cookie**：需要设置`credentials: 'include'`才能携带cookie。 3. **无abort和超时控制**：fetch不支持取消请求或设置超时，可能导致不必要的资源消耗。 4. **无进度监控**：fetch不支持原生的请求进度监测，而XHR可以。 **fetch的mode配置项** Fetch的mode属性允许你控制跨域请求的行为： - `same-origin`：遵循同源策略，仅允许同域请求。 - `cors`：支持跨域请求，并要求服务器返回CORS响应头。 - `no-cors`：跨域请求但不带CORS响应头，仅限于简单的GET请求。 **在Vue项目中封装fetch** 为了克服fetch的兼容性和其他限制，通常会对其进行封装。以下是一个简单的封装示例： 在`env.js`文件中定义基础URL和路由模式： ```javascript let baseUrl = ''; let routerMode = 'history'; if (process.env.NODE_ENV == 'development') { baseUrl = 'http://localhost:3000'; } else { baseUrl = 'http://xxxx这里是线上地址xxx'; } export { baseUrl, routerMode }; ``` 在`fetch.js`文件中实现fetch封装： ```javascript import { baseUrl } from './env'; export default async function fetchAPI(url = '', data = {}, type = 'GET', method = 'fetch') { type = type.toUpperCase(); url = baseUrl + url; // 处理GET请求的参数 if (type === 'GET') { let dataStr = ''; Object.keys(data).forEach(key => { dataStr += key + '=' + data[key] + '&'; }); if (dataStr !== '') { url = url + '?' + dataStr.substr(0, dataStr.lastIndexOf('&')); } } // 处理fetch请求 const options = { method, headers: new Headers({ 'Content-Type': 'application/json', }), mode: 'cors', // 默认启用跨域 credentials: 'include', // 默认携带cookie body: JSON.stringify(data), // 对于POST请求，将data转换为JSON字符串 }; try { const response = await fetch(url, options); const result = await response.json(); return result; } catch (error) { console.error('fetch error:', error); throw error; } } ``` 以上代码中，我们封装了一个fetchAPI函数，处理了GET和POST请求的参数，设置了默认的请求头、跨域模式和携带cookie的选项，并通过try-catch结构处理了可能的错误。 在Vue组件中使用这个封装好的fetchAPI函数，可以更方便地进行网络请求，比如： ```javascript import { fetchAPI } from '@/utils/fetch'; export default { data() { return { items: [], }; }, async created() { try { const response = await fetchAPI('/api/items'); this.items = response.data; } catch (err) { alert('请求失败，请稍后重试'); } }, }; ``` 通过这种方式，fetch在Vue项目中的应用既保持了其优势，又解决了兼容性和其他问题，提高了开发效率和代码质量。