vue中封装请求拦截和响应拦截面试

在Vue.js中，封装请求拦截和响应拦截是一个常见的做法，用于统一处理HTTP请求的行为、错误处理以及状态管理。这通常涉及到使用`axios`或者Vue CLI提供的内置服务如`vue-resource`或`@vue/cli-plugin-apollo`。以下是基本的步骤：

1. **创建拦截器函数**：
- 定义一个`requestInterceptor`函数，在发送每个请求之前被调用，可以添加全局的请求头、设置超时等。
- 同样，定义一个`responseInterceptor`函数，处理服务器返回的响应数据，例如转换JSON、解析错误信息等。

import axios from 'axios';

const instance = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  // 其他配置选项...
});

instance.interceptors.request.use(
  (config) => {
    // 添加请求前操作
    return config;
  },
  (error) => {
    // 拦截器处理错误
    console.error('请求出错', error);
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  (response) => {
    // 解析响应并处理成功情况
    return response.data;
  },
  (error) => {
    // 拦截器处理错误响应
    console.error('请求失败', error.response.data);
    return Promise.reject(error.response.data);
  }
);

2. **全局注册或组件内使用**：
- 可以将上述代码放在单独的模块中，并在需要的地方通过Vue实例的`$http`属性挂载这个封装后的`instance`。
- 或者直接在每个需要使用该功能的组件中引入，并使用它作为`methods`中的函数。