vue2封装axios请求和使用
时间: 2025-05-08 07:16:21 浏览: 23
### Vue2 中封装 Axios 请求
为了简化 HTTP 请求操作,在 Vue2 项目中可以对 `axios` 进行封装,从而减少重复代码量并集中管理请求配置。以下是具体实现方法:
#### 创建 Axios 实例
首先,在项目的合适位置(如 `/utils/axios.js` 文件),创建一个新的 JavaScript 文件来初始化和配置 `axios` 实例。
```javascript
// /utils/axios.js
import axios from 'axios';
const instance = axios.create({
baseURL: process.env.VUE_APP_API_URL || '/api', // 设置基础URL
timeout: 5000, // 超时时间
});
export default instance;
```
此部分定义了一个全局可用的基础 URL 和超时时长,并将其导出以便其他地方使用[^1]。
#### 添加拦截器
接着在同一文件内添加请求与响应拦截器,用来处理每次请求之前以及接收到服务器回应之后的操作。
```javascript
instance.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
error => Promise.reject(error)
);
instance.interceptors.response.use(
response => response.data,
error => {
console.error(`Error occurred during API call:`, error);
throw new Error(error.message);
}
);
```
这里通过检查本地存储中的令牌来进行身份验证授权,并且当遇到错误时会打印日志信息给开发者查看[^2]。
#### 定义通用请求函数
随后可以在同一目录下新建一个名为 `http.js` 或者类似的文件,用于声明一些常用的 HTTP 方法,比如 GET、POST 等等。
```javascript
// /utils/http.js
import axiosInstance from './axios';
function get(url, params={}) {
return axiosInstance.get(url, {params});
}
async function postJson(url, data={}, options={}) {
try {
let res = await axiosInstance.post(url, data, {...options})
return res;
} catch(e){
throw e;
}
}
export {get, postJson};
```
这些辅助函数可以帮助进一步抽象化网络通信逻辑,使得业务层只需要关心实际的数据交互而不必关注底层细节[^3]。
#### 组件内的应用实例
最后,在任何需要发起网络请求的地方引入上面提到的服务即可轻松调用相应的方法。
```html
<!-- MyComponent.vue -->
<template>
<!-- Your template code here -->
</template>
<script>
import {postJson} from '../utils/http';
export default {
name: "MyComponent",
methods: {
async login() {
try{
let result = await postJson("/login", {"username":"admin","password":"secret"});
alert(JSON.stringify(result));
}catch(err){
alert("Login failed");
}
}
}
}
</script>
```
这样就完成了整个流程的设计——从创建自定义的 `axios` 实例到编写便捷工具函数再到最终的应用场景展示。
阅读全文
相关推荐

















