vue中的async和await

一. 错误处理和重试逻辑

二. 并发请求

三. 条件逻辑

四. 异步初始化

五. 使用 Vuex 和异步操作

在 Vue.js 中，async 和 await 的高级用法通常涉及更复杂的异步逻辑处理，包括错误处理、条件逻辑、并发请求等。以下是一些高级用法的示例：

一. 错误处理和重试逻辑

结合 try...catch 语句，你可以优雅地处理异步操作中的错误，并实现重试逻辑。

async function fetchDataWithRetry(url, maxRetries = 3) {
let retries = 0;
while (retries < maxRetries) {
try {
const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
return await response.json();
} catch (error) {
console.error(`Request failed: ${error.message}`);
retries++;
if (retries < maxRetries) {
console.log(`Retrying in 1 second... (${retries}/${maxRetries})`);
await new Promise(resolve => setTimeout(resolve, 1000));
} else {
throw error; // rethrow to be caught by the caller
}
}
}
}

二. 并发请求

使用 Promise.all 可以同时发起多个异步请求，并在所有请求完成后继续执行。

async function fetchMultipleData() {
const urls = ['url1', 'url2', 'url3'];
const promises = urls.map(url => fetch(url).then(response => response.json()));
const results = await Promise.all(promises);
return results;
}

三. 条件逻辑

在异步函数中使用 if...else 语句可以根据条件决定执行哪个异步操作。

async function conditionalFetch(condition) {
if (condition) {
const data = await fetch('url-for-true-condition').then(response => response.json());
return data;
} else {
const data = await fetch('url-for-false-condition').then(response => response.json());
return data;
}
}

四. 异步初始化

在 Vue 组件的 created 或 mounted 生命周期钩子中，你可以使用 async 函数来执行异步初始化操作。

export default {
data() {
return {
data: null
};
},
async created() {
try {
this.data = await this.fetchData();
} catch (error) {
console.error('Failed to fetch data:', error);
}
},
methods: {
async fetchData() {
// ...fetch data logic
}
}
};

五. 使用 Vuex 和异步操作

在 Vuex 中，你可以使用 async/await 在 action 中处理异步逻辑，而 mutations 仍然是同步的

export default new Vuex.Store({
state: {
data: null
},
mutations: {
setData(state, data) {
state.data = data;
}
},
actions: {
async fetchData({ commit }) {
try {
const response = await fetch('some-url');
const data = await response.json();
commit('setData', data);
} catch (error) {
console.error('Failed to fetch data:', error);
}
}
}
});