vue实现接口
Vue 中实现接口请求的方法
Vue 中可以通过多种方式实现接口请求，常用的方法包括使用原生 fetch、axios 库或 Vue 生态的 vue-resource。
使用 axios 发送请求
axios 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 Node.js。安装 axios：
npm install axios在 Vue 组件中使用：
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 fetching data:', error);
});
}
},
mounted() {
this.fetchData();
}
}使用 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:', error);
});
}
},
mounted() {
this.fetchData();
}
}使用 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:', error);
});
}
},
mounted() {
this.fetchData();
}
}封装请求模块
为提高代码复用性，可以封装请求模块：
// src/utils/request.js
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000
});
export default instance;在组件中使用封装后的模块：
import request from '@/utils/request';
export default {
methods: {
fetchData() {
request.get('/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error:', error);
});
}
},
mounted() {
this.fetchData();
}
}处理请求拦截和响应拦截
通过 axios 的拦截器实现统一处理：
// src/utils/request.js
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000
});
// 请求拦截器
instance.interceptors.request.use(
config => {
config.headers.Authorization = 'Bearer token';
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
response => {
return response.data;
},
error => {
console.error('Response Error:', error);
return Promise.reject(error);
}
);
export default instance;使用 async/await 语法
结合 async/await 简化异步代码：
export default {
methods: {
async fetchData() {
try {
const response = await axios.get('https://api.example.com/data');
console.log(response.data);
} catch (error) {
console.error('Error:', error);
}
}
},
mounted() {
this.fetchData();
}
}以上方法覆盖了 Vue 中实现接口请求的主要场景，开发者可根据项目需求选择合适的方式。
