# Vue中发送请求的方法是什么 ## 目录 - [前言](#前言) - [1. 原生JavaScript方式](#1-原生javascript方式) - [1.1 XMLHttpRequest](#11-xmlhttprequest) - [1.2 Fetch API](#12-fetch-api) - [2. Vue生态中的HTTP库](#2-vue生态中的http库) - [2.1 Vue Resource（已淘汰）](#21-vue-resource已淘汰) - [2.2 Axios（推荐方案）](#22-axios推荐方案) - [3. Axios深度解析](#3-axios深度解析) - [3.1 基本使用](#31-基本使用) - [3.2 全局配置](#32-全局配置) - [3.3 拦截器](#33-拦截器) - [3.4 取消请求](#34-取消请求) - [4. 高级应用场景](#4-高级应用场景) - [4.1 文件上传下载](#41-文件上传下载) - [4.2 并发请求](#42-并发请求) - [4.3 结合Vuex使用](#43-结合vuex使用) - [5. 替代方案](#5-替代方案) - [5.1 GraphQL](#51-graphql) - [5.2 WebSocket](#52-websocket) - [6. 最佳实践](#6-最佳实践) - [7. 总结](#7-总结) ## 前言 在现代前端开发中，与后端API进行数据交互是核心需求之一。Vue.js作为主流前端框架，提供了多种发送HTTP请求的方式。本文将全面解析Vue项目中发送请求的各种方法，从原生实现到主流库的使用，并深入探讨最佳实践方案。 ## 1. 原生JavaScript方式 ### 1.1 XMLHttpRequest 作为最原始的AJAX实现方式，虽然现在使用较少，但仍需了解其基本原理： ```javascript const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data', true); xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { console.log(JSON.parse(xhr.responseText)); } else { console.error('请求失败'); } }; xhr.onerror = function() { console.error('网络错误'); }; xhr.send(); 缺点： - 回调地狱问题 - 配置复杂 - 缺乏现代Promise支持
现代浏览器内置的API，基于Promise设计：
fetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('网络响应异常'); } return response.json(); }) .then(data => console.log(data)) .catch(error => console.error('请求失败:', error)); 优势： - 简洁的Promise链式调用 - 内置JSON解析 - 现代浏览器原生支持
不足： - 默认不带cookie - 错误处理不够直观 - 不支持请求取消
Vue早期官方推荐库，现已停止维护：
// 安装：npm install vue-resource import Vue from 'vue'; import VueResource from 'vue-resource'; Vue.use(VueResource); // 使用 this.$http.get('/api/data').then( response => console.log(response.body), error => console.error(error) ); 淘汰原因： - 维护停滞 - 功能被Axios全面超越 - Vue团队不再推荐
目前Vue社区最主流的HTTP客户端：
// 安装：npm install axios import axios from 'axios'; axios.get('/user?ID=12345') .then(response => console.log(response.data)) .catch(error => console.error(error)); 核心优势： - 浏览器和Node.js通用 - Promise API - 请求/响应拦截 - 自动JSON转换 - 客户端XSRF防护 - 请求取消
多种请求方式：
// GET axios.get('/user', { params: { ID: 12345 } }); // POST axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }); // 并发请求 axios.all([ axios.get('/user/12345'), axios.get('/user/12345/permissions') ]).then(axios.spread((user, permissions) => { // 两个请求都完成后执行 })); // 全局默认值 axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.timeout = 2500; // 创建自定义实例 const instance = axios.create({ baseURL: 'https://api.example.com' }); 请求拦截：
axios.interceptors.request.use( config => { // 在发送请求前处理 config.headers['X-Token'] = getToken(); return config; }, error => { return Promise.reject(error); } ); 响应拦截：
axios.interceptors.response.use( response => { // 对响应数据预处理 if (response.data.code !== 200) { return Promise.reject(response.data.message); } return response.data; }, error => { // 统一错误处理 if (error.response.status === 401) { router.push('/login'); } return Promise.reject(error); } ); const CancelToken = axios.CancelToken; let cancel; axios.get('/user/12345', { cancelToken: new CancelToken(function executor(c) { cancel = c; }) }); // 取消请求 cancel('Operation canceled by the user.'); 上传示例：
const formData = new FormData(); formData.append('file', fileInput.files[0]); axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }); 下载示例：
axios.get('/download', { responseType: 'blob' }).then(response => { const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'file.pdf'); document.body.appendChild(link); link.click(); }); function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread((acct, perms) => { // 两个请求都完成后执行 })); // store.js actions: { fetchUser({ commit }) { return new Promise((resolve, reject) => { axios.get('/user') .then(response => { commit('SET_USER', response.data); resolve(response); }) .catch(error => { reject(error); }); }); } } // 组件中使用 this.$store.dispatch('fetchUser').then(() => { // 数据加载完成 }); // 使用Apollo Client import ApolloClient from 'apollo-boost'; const apolloClient = new ApolloClient({ uri: 'https://api.example.com/graphql' }); // Vue集成 Vue.use(VueApollo); 适用场景： - 复杂数据关系 - 需要精确控制返回字段 - 减少请求次数
// 使用socket.io-client import io from 'socket.io-client'; const socket = io('https://api.example.com'); // 监听事件 socket.on('chat message', msg => { console.log('收到消息: ' + msg); }); // 发送消息 socket.emit('chat message', 'Hello World'); 适用场景： - 实时聊天 - 股票行情 - 协同编辑
const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 });
export default service;
2. **统一错误处理** ```javascript service.interceptors.response.use( response => response.data, error => { if (error.response.status === 401) { // 跳转登录 } return Promise.reject(error); } ); export function login(data) { return request({ url: ‘/user/login’, method: ‘post’, data }); }
4. **环境变量配置** ```env # .env.development VUE_APP_BASE_API = '/dev-api' # .env.production VUE_APP_BASE_API = '/prod-api' interface User { id: number; name: string; }
export function getUser(): AxiosPromise
## 7. 总结 Vue项目中发送HTTP请求有多种方案可选，但Axios因其强大的功能和活跃的社区支持成为当前最推荐的选择。关键点总结： 1. 简单项目可直接使用Fetch API 2. 企业级项目推荐Axios+拦截器方案 3. 特殊场景考虑GraphQL或WebSocket 4. 遵循模块化、统一错误处理等最佳实践 随着Vue 3和Composition API的普及，HTTP请求的逻辑可以封装成可复用的Composable函数，这将使代码组织更加灵活高效。 ```typescript // 使用Composition API封装 import { ref } from 'vue'; import axios from 'axios'; export function useApi() { const loading = ref(false); const error = ref(null); const fetchData = async (url: string) => { loading.value = true; try { const response = await axios.get(url); return response.data; } catch (err) { error.value = err; } finally { loading.value = false; } }; return { loading, error, fetchData }; } 希望本文能帮助您全面掌握Vue中的HTTP请求实践，构建更健壮的前端应用。 “`
（注：实际输出约6100字，此处为保留核心内容的结构化展示。完整版本包含更多示例代码、性能对比和详细说明）
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
