vue实现接口
Vue 中实现接口请求的方法
Vue 中可以通过多种方式实现接口请求，常用的有原生 fetch、axios 库或 Vue 生态的 vue-resource。以下是具体实现方法。
使用 axios 发送请求
axios 是流行的 HTTP 客户端库，支持 Promise API，适合在 Vue 中使用。
安装 axios：
npm install axios在组件中使用：
import axios from 'axios';
export default {
methods: {
fetchData() {
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
}
}
}使用 fetch API
原生 fetch 是现代浏览器支持的 API，无需额外安装库。
export default {
methods: {
fetchData() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
}
}
}使用 vue-resource
vue-resource 是 Vue 官方曾经的 HTTP 库（现已不维护，但部分旧项目仍在使用）。
安装：
npm install vue-resource在 Vue 中全局引入：
import Vue from 'vue';
import VueResource from 'vue-resource';
Vue.use(VueResource);组件中使用：
export default {
methods: {
fetchData() {
this.$http.get('https://api.example.com/data')
.then(response => {
console.log(response.body);
})
.catch(error => {
console.error(error);
});
}
}
}封装请求模块
为提高代码复用性，可以封装一个独立的 HTTP 模块。
创建 api.js：
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000
});
export const getData = () => instance.get('/data');
export const postData = (payload) => instance.post('/data', payload);在组件中调用：
import { getData } from './api';
export default {
methods: {
async loadData() {
try {
const response = await getData();
console.log(response.data);
} catch (error) {
console.error(error);
}
}
}
}处理跨域问题
开发时若遇到跨域问题，可通过配置代理解决。
在 vue.config.js 中：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://api.example.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
};请求时使用相对路径：
axios.get('/api/data');拦截器配置
axios 支持请求和响应拦截器，适合统一处理认证或错误。
axios.interceptors.request.use(
config => {
config.headers.Authorization = 'Bearer token';
return config;
},
error => Promise.reject(error)
);
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
// 处理未授权
}
return Promise.reject(error);
}
);以上方法覆盖了 Vue 中接口请求的主要场景，可根据项目需求选择合适方案。对于新项目，推荐使用 axios 并配合模块化封装。
