如何在Vue.js中实现异步操作的错误处理和重试逻辑？

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 += 1;
            if (retries >= maxRetries) {
                console.error('Max retries reached. Throwing error.');
                throw error;
            }
            console.log(`Retrying request... (${retries}/${maxRetries})`);
        }
    }
}

install(Vue) {
    Vue.prototype.$withRetry = async function(fn, options = {}) {
      const { retries = 3, delay = 1000 } = options;
      let lastError;
      
      for (let i = 0; i < retries; i++) {
        try {
          return await fn();
        } catch (error) {
          lastError = error;
          if (i < retries - 1) {
            await new Promise(resolve => setTimeout(resolve, delay * (i + 1)));
          }
        }
      }
      
      throw lastError;
    };
  }