vue中实现接口
Vue 中实现接口调用的方法
在 Vue 中调用接口通常使用 axios 或 fetch 等 HTTP 客户端库。以下是几种常见的实现方式：
使用 axios 发送 GET 请求
安装 axios 后，在组件中直接调用：
import axios from 'axios';
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});封装 axios 为服务模块
创建 api.js 文件统一管理接口：
import axios from 'axios';
const api = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000
});
export default {
getData() {
return api.get('/data');
},
postData(payload) {
return api.post('/data', payload);
}
}在 Vue 组件中使用 async/await
结合 Vue 的 methods 使用异步请求：
export default {
methods: {
async fetchData() {
try {
const response = await this.$api.getData();
this.data = response.data;
} catch (error) {
console.error(error);
}
}
},
created() {
this.fetchData();
}
}使用 Vuex 管理接口状态
在 store 中定义 actions 处理异步请求：
// store/modules/data.js
import api from '@/api';
export default {
actions: {
async fetchData({ commit }) {
try {
const { data } = await api.getData();
commit('SET_DATA', data);
} catch (error) {
commit('SET_ERROR', error);
}
}
}
}环境变量配置
在 .env 文件中配置不同环境的 API 地址：
VUE_APP_API_URL=https://api.example.com然后在请求中使用：
baseURL: process.env.VUE_APP_API_URL请求拦截和响应拦截
添加全局的请求/响应处理：
axios.interceptors.request.use(config => {
config.headers.Authorization = `Bearer ${token}`;
return config;
});
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
router.push('/login');
}
return Promise.reject(error);
}
);使用组合式 API
在 Vue 3 的 setup 中使用：
import { ref } from 'vue';
import api from '@/api';
export default {
setup() {
const data = ref(null);
const fetchData = async () => {
try {
const response = await api.getData();
data.value = response.data;
} catch (error) {
console.error(error);
}
};
return { data, fetchData };
}
}
