首页如何在Vue项目中自定义网络请求处理？

如何在Vue项目中自定义网络请求处理？

时间: 2025-02-13 11:25:08 浏览: 35

在Vue项目中，自定义网络请求处理通常会涉及到创建一个全局的API客户端或者使用插件如axios、vue-resource等。以下是使用axios作为例子： 1. 安装axios库（如果尚未安装）： ```bash npm install axios --save ``` 2. 创建一个`src/utils/http.js`文件，用于封装通用的HTTP请求函数： ```javascript import axios from 'axios'; const service = axios.create({ baseURL: process.env.BASE_API, // API 的基础 URL timeout: 5000, // 请求超时时间 headers: { 'Content-Type': 'application/json' } }); service.interceptors.request.use( config => { // 在发送请求之前做些什么 return config; }, error => { // 对请求错误做些什么 return Promise.reject(error); } ); service.interceptors.response.use( response => { // 如果状态码不是200，可以在这里做错误处理 if (response.status !== 200) { throw new Error(response.data.message || 'Server Error'); } return response.data; }, error => { // 捕获响应错误 console.error('Error', error); // for example log the error to console. return Promise.reject(error); } ); export default { service }; ``` 然后在需要发起请求的地方导入并使用这个服务： ```javascript import { service } from '@/utils/http'; export function fetchData(url) { return service.get(url); } ```

阅读全文