vue 怎么实现api
Vue 实现 API 调用的方法
Vue 中调用 API 通常通过 HTTP 客户端库（如 axios 或 fetch）实现，结合异步处理和数据管理。以下是几种常见方法：
使用 Axios 发送请求
安装 Axios：
npm install axios在组件中调用 API：
import axios from 'axios';
export default {
data() {
return {
posts: []
};
},
async created() {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
this.posts = response.data;
} catch (error) {
console.error('API 请求失败:', error);
}
}
};使用 Fetch API
无需额外安装库，直接使用浏览器原生 fetch：
export default {
data() {
return {
users: []
};
},
async mounted() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
this.users = await response.json();
} catch (error) {
console.error('请求失败:', error);
}
}
};封装 API 服务层
推荐将 API 调用封装为独立模块（如 src/api/service.js）：
import axios from 'axios';
const apiClient = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000
});
export default {
getPosts() {
return apiClient.get('/posts');
},
createPost(postData) {
return apiClient.post('/posts', postData);
}
};组件中调用封装后的方法：
import apiService from '@/api/service';
export default {
methods: {
async loadData() {
const response = await apiService.getPosts();
console.log(response.data);
}
}
};结合 Vuex 管理 API 数据
适合复杂状态管理（需安装 Vuex）：
// store.js
import axios from 'axios';
const actions = {
async fetchUsers({ commit }) {
const response = await axios.get('/users');
commit('SET_USERS', response.data);
}
};
const mutations = {
SET_USERS(state, users) {
state.users = users;
}
};组件中通过 dispatch 触发：
export default {
computed: {
users() {
return this.$store.state.users;
}
},
created() {
this.$store.dispatch('fetchUsers');
}
};错误处理与拦截器
通过 Axios 拦截器统一处理错误：
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 404) {
alert('资源不存在');
}
return Promise.reject(error);
}
);关键注意事项
-
跨域问题需配置后端 CORS 或前端代理（vue.config.js）：
devServer: { proxy: { '/api': { target: 'http://backend-domain.com', changeOrigin: true } } } -
敏感 API 密钥应通过环境变量（
.env）管理：VUE_APP_API_KEY=your_key代码中通过
process.env.VUE_APP_API_KEY访问。 -
对于大量 API 调用，建议添加取消令牌（CancelToken）避免重复请求。
