vue实现api
Vue 实现 API 调用
在 Vue 中调用 API 通常涉及使用 axios 或 fetch 发送 HTTP 请求，并结合 Vue 的响应式特性管理数据。以下是常见的实现方式：
安装 axios
通过 npm 或 yarn 安装 axios：
npm install axios基本 API 调用示例
在 Vue 组件中引入 axios 并发送请求：
import axios from 'axios';
export default {
data() {
return {
posts: [],
error: null
};
},
methods: {
async fetchPosts() {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
this.posts = response.data;
} catch (err) {
this.error = err.message;
}
}
},
mounted() {
this.fetchPosts();
}
};封装 API 模块
将 API 请求封装为独立模块（如 api.js），便于复用：
// api.js
import axios from 'axios';
const api = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com',
timeout: 5000
});
export const getPosts = () => api.get('/posts');
export const createPost = (postData) => api.post('/posts', postData);在组件中使用：
import { getPosts } from '@/api';
export default {
methods: {
async loadData() {
const response = await getPosts();
console.log(response.data);
}
}
};使用 Vuex 管理 API 数据
对于复杂应用，可通过 Vuex 集中管理 API 返回的数据：
// store.js
import axios from 'axios';
export default {
state: {
users: []
},
mutations: {
SET_USERS(state, users) {
state.users = users;
}
},
actions: {
async fetchUsers({ commit }) {
const response = await axios.get('/users');
commit('SET_USERS', response.data);
}
}
};处理加载状态
通过变量控制加载状态，提升用户体验：
data() {
return {
isLoading: false
};
},
methods: {
async fetchData() {
this.isLoading = true;
try {
await apiCall();
} finally {
this.isLoading = false;
}
}
}拦截器配置
使用 axios 拦截器统一处理请求和响应：
axios.interceptors.request.use(config => {
config.headers.Authorization = 'Bearer token';
return config;
});
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
// 处理未授权
}
return Promise.reject(error);
}
);注意事项
- 跨域问题需在后端配置 CORS 或通过代理解决（如 Vue CLI 的
devServer.proxy）。 - 生产环境应将 API 地址配置为环境变量。
- 对于敏感操作（如登录），需结合 HTTPS 和 Token 验证。
通过以上方法，可以高效地在 Vue 项目中实现 API 交互。
