面试题：Vue中如何设置网络请求拦截器并处理一般的请求错误

Question

在Vue项目中，假设使用axios作为网络请求库，阐述如何设置请求拦截器和响应拦截器。并且当请求出现404错误时，如何在拦截器中捕获并提示用户友好的错误信息。

Answer 1

在Vue项目中使用axios设置请求拦截器和响应拦截器以及处理404错误可按以下步骤进行：

设置请求拦截器

import axios from 'axios';

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 基础接口地址
  timeout: 5000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么，例如添加token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

设置响应拦截器

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做些什么，例如处理通用的返回结构
    const res = response.data;
    if (res.code!== 200) {
      // 这里处理非200的业务错误
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

捕获404错误并提示友好信息

// 响应拦截器中处理404错误
service.interceptors.response.use(
  response => {
    // 正常响应处理
    return response;
  },
  error => {
    if (error.response && error.response.status === 404) {
      // 提示用户友好的错误信息，这里假设使用了Element UI的Message组件
      import { Message } from 'element-ui';
      Message.error('请求的资源未找到');
    }
    return Promise.reject(error);
  }
);

在上述代码中：

1. 请求拦截器：在service.interceptors.request.use中，config为请求配置对象，我们可以在请求发送前对其进行修改，如添加认证信息。
2. 响应拦截器：在service.interceptors.response.use中，response为响应对象，我们可以处理响应数据或错误。
3. 404错误处理：在响应拦截器的错误处理部分，判断error.response.status是否为404，如果是则提示用户友好的错误信息。实际应用中，可以根据项目所使用的UI库来选择合适的提示方式。