vue实现异步函数
Vue 中实现异步函数的几种方法
使用 async/await
在 Vue 方法或生命周期钩子中可以直接使用 async/await 语法处理异步操作。这种方式代码更清晰，易于理解。
methods: {
async fetchData() {
try {
const response = await axios.get('/api/data');
this.data = response.data;
} catch (error) {
console.error('Error fetching data:', error);
}
}
}使用 Promise
对于不支持 async/await 的环境或需要更细粒度控制的情况，可以使用 Promise。
methods: {
fetchData() {
axios.get('/api/data')
.then(response => {
this.data = response.data;
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
}结合 Vue 生命周期
在 created 或 mounted 等生命周期钩子中调用异步方法。
created() {
this.fetchData();
},
methods: {
async fetchData() {
const response = await axios.get('/api/data');
this.data = response.data;
}
}使用 Vuex 管理异步状态
在大型应用中，建议使用 Vuex 集中管理异步状态。
// store.js
actions: {
async fetchData({ commit }) {
const response = await axios.get('/api/data');
commit('SET_DATA', response.data);
}
}
// component
methods: {
...mapActions(['fetchData']),
loadData() {
this.fetchData();
}
}处理加载状态
通常需要显示加载状态，可以结合 data 属性或计算属性。
data() {
return {
isLoading: false,
data: null
}
},
methods: {
async fetchData() {
this.isLoading = true;
try {
const response = await axios.get('/api/data');
this.data = response.data;
} finally {
this.isLoading = false;
}
}
}并行执行多个异步请求
使用 Promise.all 并行执行多个异步请求。
methods: {
async fetchAllData() {
const [users, posts] = await Promise.all([
axios.get('/api/users'),
axios.get('/api/posts')
]);
this.users = users.data;
this.posts = posts.data;
}
}使用 watch 监听异步数据变化
当需要响应数据变化执行异步操作时，可以使用 watch。
watch: {
searchQuery: {
handler: async function(newVal) {
const response = await axios.get(`/api/search?q=${newVal}`);
this.results = response.data;
},
immediate: true
}
}取消异步请求
对于可能需要取消的请求，可以使用 axios 的 CancelToken。
data() {
return {
cancelToken: null
}
},
methods: {
fetchData() {
if (this.cancelToken) {
this.cancelToken.cancel();
}
this.cancelToken = axios.CancelToken.source();
axios.get('/api/data', {
cancelToken: this.cancelToken.token
}).then(response => {
this.data = response.data;
}).catch(thrown => {
if (!axios.isCancel(thrown)) {
console.error(thrown);
}
});
}
}这些方法覆盖了 Vue 中处理异步操作的主要场景，可以根据具体需求选择合适的方式。
