Vue.js处理API请求失败的最佳实践和策略

// src/axios.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
});

// 添加请求拦截器
instance.interceptors.request.use(config => {
  // 在发送请求之前做些什么，比如添加token
  config.headers.Authorization = `Bearer ${store.state.token}`;
  return config;
}, error => {
  // 对请求错误做些什么
  console.error('Request Error', error);
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response;
}, error => {
  // 对响应错误做点什么
  if (error.response) {
    // 服务器返回了状态码，但状态码不在2xx的范围内
    console.error('Response Error', error.response.data);
    console.error('Status', error.response.status);
    console.error('Headers', error.response.headers);
  } else if (error.request) {
    // 请求已发出，但没有收到响应
    console.error('No response received', error.request);
  } else {
    // 发生了触发请求错误的问题
    console.error('Error Message', error.message);
  }
  return Promise.reject(error);
});

methods: {
  fetchData() {
    this.axios.get('/data')
      .then(response => {
        // 处理数据
        this.data = response.data;
      })
      .catch(error => {
        if (error.response && error.response.status === 401) {
          // 处理未授权错误，可能需要重定向到登录页面
          this.$router.push('/login');
        } else if (error.response && error.response.status === 404) {
          // 处理资源未找到错误
          this.error = 'Requested resource not found';
        } else {
          // 处理其他错误
          this.error = 'Something went wrong';
        }
      });
  }
}

// 使用事件总线
this.$bus.$emit('error', error);

// 在另一个地方监听
this.$bus.$on('error', (error) => {
  // 处理错误
  this.handleError(error);
});

mutations: {
  setError(state, error) {
    state.error = error;
  }
},
actions: {
  fetchData({ commit }) {
    axios.get('/data')
      .then(response => {
        // 处理数据
      })
      .catch(error => {
        commit('setError', error);
      });
  }
}

<template>
  <div>
    <div v-if="error" class="error-message">
      {{ error }}
    </div>
    <!-- 其他内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      error: ''
    };
  },
  methods: {
    fetchData() {
      axios.get('/data')
        .then(response => {
          // 处理数据
        })
        .catch(error => {
          this.error = 'Something went wrong';
        });
    }
  }
};
</script>

<style>
.error-message {
  color: red;
}
</style>

methods: {
  fetchData() {
    this.axios.get('/data')
      .catch(error => {
        if (error.response.status === 503) {
          this.retryFetchData();
        } else {
          this.handleError(error);
        }
      });
  },
  retryFetchData() {
    setTimeout(() => {
      this.fetchData();
    }, 3000); // 3秒后重试
  }
}

catch(error => {
  console.error(error);
  // 发送错误到错误追踪服务，如Sentry
})

methods: {
  fetchData() {
    try {
      const data = axios.get('/data');
      this.data = data;
    } catch (error) {
      this.data = this.cacheData; // 使用缓存数据
    }
  }
}