vue怎么获取接口
在 vue 中获取接口数据的方式有:使用 axios 发送请求;使用 async/await 发送请求;使用 vuex 管理状态;使用 composition api 创建响应式变量并 useeffect 发送请求。
如何在 Vue 中获取接口数据
Vue 中获取接口数据是一个常见的操作,可以通过以下步骤实现:
1. 发送请求
// 使用 axios 发送 GET 请求axios.get('api/url') .then(response => { // 请求成功的回调函数 }) .catch(error => { // 请求失败的回调函数 });
2. 使用 async/await
立即学习“前端免费学习笔记(深入)”;
// 使用 async/await 发送请求async function getData() { try { const response = await axios.get('api/url'); } catch (error) { // 请求失败的处理 }}
3. 使用 Vuex
Vuex 是 Vue 中的状态管理工具,可以用来获取接口数据:
const state = { data: []};const actions = { fetchData({ commit }) { axios.get('api/url') .then(response => { commit('setData', response.data); }) .catch(error => { // 请求失败的处理 }); }};const mutations = { setData(state, data) { state.data = data; }};
4. 使用 Composition API
// 使用 Composition API 的 ref 创建一个响应式变量const data = ref([]);// 使用 useEffect 在组件初始化时发送请求useEffect(() => { axios.get('api/url') .then(response => { data.value = response.data; }) .catch(error => { // 请求失败的处理 });}, []);
提示: