面试题：Vue项目中使用Fetch API进行网络请求时，如何处理请求错误并在组件中友好提示

错误捕获与提示思路：
- 使用try - catch块来捕获fetch请求过程中可能出现的错误。网络错误（例如网络未连接等）会在fetch被调用时直接抛出异常。
- 对于HTTP错误（如404等），fetch不会直接抛出异常，需要检查响应的status属性。
- 使用Vue的消息提示插件（例如vue - toastification）来向用户展示友好的提示信息。
代码示例：
- 假设已经安装并引入了vue - toastification插件，在Vue组件中代码如下：

<template>
  <div>
    <button @click="fetchUserInfo">获取用户信息</button>
  </div>
</template>

<script>
import { toast } from 'vue - toastification';

export default {
  methods: {
    async fetchUserInfo() {
      try {
        const response = await fetch('/api/userInfo');
        if (!response.ok) {
          if (response.status === 404) {
            toast.error('用户信息未找到');
          } else {
            toast.error('请求出现错误，请稍后重试');
          }
          return;
        }
        const data = await response.json();
        console.log('用户信息:', data);
      } catch (error) {
        toast.error('网络错误，请检查网络连接');
      }
    }
  }
};
</script>

上述代码中，fetchUserInfo方法在点击按钮时触发。首先使用try - catch块捕获可能的错误。如果fetch调用出现网络错误，catch块会捕获并通过toast.error显示网络错误提示。如果fetch调用成功但HTTP状态码不是2xx，则根据不同状态码显示相应提示信息。如果请求和响应都正常，会解析并打印用户信息。

星途面试题库

面试题：Vue项目中使用Fetch API进行网络请求时，如何处理请求错误并在组件中友好提示

知识考点

面试题答案