面试题：Vue网络请求拦截器在复杂业务场景下的优化与错误处理

1. 设计思路

请求优先级管理：为每个请求分配一个优先级标识（如数字，越大优先级越高）。在请求队列中，按照优先级对请求进行排序，高优先级请求优先处理。
请求分类处理：针对不同类型的请求（GET、POST、文件上传、长连接），采用不同的处理逻辑。例如，文件上传可能需要特殊的请求头设置，长连接需要特殊的保持机制。
错误捕获与处理：通过try - catch块捕获请求过程中的错误，针对不同类型的错误（网络超时、服务器内部错误等）进行不同的处理，如重试、提示用户等。
用户体验优化：在错误处理过程中，尽量避免直接向用户抛出原始错误信息，而是提供友好的提示，告知用户发生了什么问题以及可能的解决方案。

2. 实现步骤

安装依赖：在Vue项目中，通常使用axios作为HTTP请求库。确保项目中已安装axios。

npm install axios

创建请求拦截器：在项目中创建一个request.js文件，用于配置请求拦截器。

import axios from 'axios';

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

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在这里为请求添加优先级标识，假设从请求配置中获取priority字段
    const priority = config.priority || 0;
    // 针对不同类型请求做特殊处理
    if (config.method === 'post' && config.data instanceof FormData) {
      config.headers['Content-Type'] = 'multipart/form-data';
    }
    // 长连接请求可设置特殊的请求头或处理逻辑
    if (config.url.includes('/long - connection')) {
      config.headers['Connection'] = 'keep - alive';
    }
    return config;
  },
  error => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;
    // 正常响应处理
    return res;
  },
  error => {
    // 捕获错误
    if (error.message.includes('timeout')) {
      // 网络超时处理
      // 这里可以根据请求优先级决定是否重试
      if (error.config.priority >= 5) {
        // 高优先级请求重试
        return service.request(error.config);
      } else {
        // 低优先级请求提示用户
        console.error('网络请求超时，请稍后重试');
      }
    } else if (error.response && error.response.status === 500) {
      // 服务器内部错误处理
      console.error('服务器内部错误，请联系管理员');
    } else {
      // 其他错误处理
      console.error('请求发生错误', error.message);
    }
    return Promise.reject(error);
  }
);

export default service;

在Vue项目中使用：在需要发送请求的组件中引入request.js文件。

import request from '@/utils/request';

export default {
  data() {
    return {};
  },
  methods: {
    async sendRequest() {
      try {
        const response = await request({
          url: '/api/user',
          method: 'get',
          priority: 3, // 设置请求优先级
        });
        console.log(response);
      } catch (error) {
        console.error('请求失败', error);
      }
    },
  },
};

3. 总结

通过以上设计和实现，我们可以创建一个功能强大的网络请求拦截器，满足复杂业务需求，同时在各种请求错误情况下做到高效、优雅的错误捕获与处理，减少对用户体验的影响。在实际应用中，可以根据项目的具体需求进一步优化和扩展该拦截器。

星途面试题库

面试题：Vue网络请求拦截器在复杂业务场景下的优化与错误处理

知识考点

面试题答案

1. 设计思路

2. 实现步骤

3. 总结