Vue 拦截器与请求封装代码

在 Vue 应用开发中，合理运用拦截器和请求封装代码可以极大地提升开发效率、增强代码的可维护性，并有效地处理各种网络请求相关的逻辑。

拦截器是一种强大的机制，它允许我们在请求发送前和响应返回后进行自定义的处理。例如，在发送请求前，我们可以添加请求头，携带必要的认证信息或其他参数。这有助于确保请求的完整性和安全性。而在响应返回后，我们可以统一处理错误状态，比如将特定的错误码映射为友好的提示信息，或者根据响应状态决定是否进行重试操作。

请求封装代码则为我们提供了一种集中管理请求逻辑的方式。通过将常见的请求类型（如 GET、POST、PUT、DELETE 等）封装成函数，我们可以避免在各个组件中重复编写相似的请求代码。这样不仅减少了代码冗余，还使得请求的配置和参数传递更加清晰和直观。

以下是一个简单的 Vue 拦截器与请求封装的示例代码：

// 创建 axios 实例
const axiosInstance = axios.create({
  baseURL: 'http://your-api-base-url',
  headers: {
    'Content-Type': 'application/json'
  }
});

// 请求拦截器
axiosInstance.interceptors.request.use(config => {
  // 在此添加请求前的处理逻辑，如添加 token
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器
axiosInstance.interceptors.response.use(response => {
  // 在此处理响应成功的逻辑
  return response.data;
}, error => {
  // 在此处理响应错误的逻辑
  if (error.response.status === 401) {
    // 未授权，跳转到登录页面或进行其他处理
  }
  return Promise.reject(error);
});

// 封装的请求函数
export function getRequest(url, params = {}) {
  return axiosInstance.get(url, { params });
}

export function postRequest(url, data = {}) {
  return axiosInstance.post(url, data);
}

通过上述的拦截器和请求封装，我们在项目中能够更加高效、可靠地进行网络请求操作。无论是处理常见的请求类型，还是应对复杂的请求逻辑和错误处理，都能够游刃有余。

在实际开发中，根据项目的具体需求，我们还可以进一步扩展和优化拦截器和请求封装的功能。比如添加请求超时处理、缓存机制、请求队列管理等，以满足不同场景下的应用要求。

Vue 中的拦截器与请求封装代码是提升应用质量和开发效率的重要手段，熟练掌握并灵活运用它们，将为我们的 Vue 开发工作带来极大的便利。