当前位置：首页 > news >正文

vue3 axios接口封装

news 2025/7/23 14:34:21

在Vue 3中，可以通过封装axios来实现接口的统一管理和调用。封装后的接口调用更加简洁，代码可维护性也更好。以下是一个简单的Vue 3中axios接口封装的示例：

1.首先，安装axios和qs（如果需要处理复杂数据）：

npm install axios qs

2.创建一个api.js文件用于存放接口封装的代码：

// api.js
import axios from 'axios';
import qs from 'qs';// 创建axios实例
const instance = axios.create({baseURL: 'https://api.example.com', // 替换为你的后端接口地址timeout: 10000, // 请求超时时间
});// 请求拦截器
instance.interceptors.request.use(config => {// 在请求发送之前可以做一些处理，比如添加请求头等return config;},error => {// 请求错误处理return Promise.reject(error);}
);// 响应拦截器
instance.interceptors.response.use(response => {// 在这里可以对响应数据进行处理return response.data;},error => {// 响应错误处理return Promise.reject(error);}
);// 封装get请求
export function get(url, params) {return instance.get(url, {params,});
}// 封装post请求
export function post(url, data) {return instance.post(url, qs.stringify(data));
}

3.在Vue组件中使用接口：

<template><div><button @click="getData">获取数据</button><div v-if="data"><p>{{ data }}</p></div></div>
</template><script>
import { get } from './api'; // 替换为你的api.js文件的路径export default {data() {return {data: null,};},methods: {async getData() {try {const response = await get('/data'); // 替换为你的后端接口路径this.data = response;} catch (error) {console.error('获取数据失败:', error);}},},
};
</script>

在上述示例中，我们在api.js文件中封装了get和post请求，并配置了axios的请求拦截器和响应拦截器，以便在请求发送和响应返回时进行统一处理。然后，在Vue组件中，我们通过导入get函数来调用后端接口获取数据。

这样，你就可以在Vue 3项目中使用封装后的axios接口调用，更加方便和灵活地管理和调用后端接口。同时，通过axios的拦截器，你可以在请求和响应时进行一些全局的处理，如添加请求头、统一处理错误等。