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);  
      }  
    }  
  }  
});

在这个 Vuex store 的示例中，fetchData action 是异步的，它负责获取数据并通过调用 mutation 更新 state。

记住，虽然 async/await 让异步代码更易于阅读和编写，但底层仍然是基于 Promise 的。因此，理解和熟悉 Promise 是掌握这些高级用法的基础。