深入理解并优化Axios实例配置与拦截器使用

深入理解并优化Axios实例配置与拦截器使用

在前端开发中，与后端API的交互是一项核心任务。Axios作为一个流行的HTTP客户端库，被广泛用于处理这些交互。本文将详细介绍如何创建一个Axios实例，并为其配置基础设置，如API的基础路径和请求超时时间。同时，我们还将探讨如何为这个实例添加请求拦截器和响应拦截器，以便在请求发送前后和响应接收前后执行一些自定义逻辑。

创建并配置Axios实例

首先，我们使用axios.create方法创建了一个新的Axios实例，并命名为service。这个实例被配置了baseURL和timeout属性，分别用于设置API的基础路径和请求的超时时间。

const service = axios.create({
  baseURL: '/api', // API的基础路径
  timeout: 10000, // 请求超时时间
});

请求拦截器的应用

在发送请求之前，我们设置了一个请求拦截器。这个拦截器会检查用户是否已登录，如果用户已登录，就将token添加到请求头中，以便后端进行身份验证。

service.interceptors.request.use(
  (config) => {
    const userStore = useUserStore();
    if (userStore.token) {
      config.headers.Authorization = `Bearer ${userStore.token}`;
    }
    return config;
  },
  (error) => {
    console.error('请求拦截器错误:', error);
    return Promise.reject(error);
  }
);

响应拦截器的实现

当请求得到响应后，我们设置了一个响应拦截器。这个拦截器会首先检查响应的数据类型是否为Blob，如果是则直接返回数据。然后，它会根据响应的success字段来判断请求是否成功，并据此执行相应的操作，如显示成功或错误消息。

service.interceptors.response.use(
  (response) => {
    if (response.data instanceof Blob) {
      return response.data;
    }

    const { success, message, data } = response.data;

    if (success) {
      // 原本这里应该有显示成功消息的逻辑，但由于ElMessage的引入问题被注释掉了
      return data;
    } else {
      // 原本这里应该有显示错误消息的逻辑，但由于ElMessage的引入问题被注释掉了
      return Promise.reject(new Error(data || '未知错误'));
    }
  },
  (error) => {
    console.error('响应拦截器错误:', error);

    if (error.response && error.response.status === 401) {
      // 401错误处理逻辑，包括清除token和跳转到登录页面
      // 原本这里应该有显示错误消息的逻辑，但由于ElMessage的引入问题被注释掉了
      useUserStore().clearToken();
      router.push('/login');
      return Promise.reject(new Error('无效的token'));
    }

    // 其他错误处理逻辑
    // 原本这里应该有显示错误消息的逻辑，但由于ElMessage的引入问题被注释掉了
    return Promise.reject(error);
  }
);

注意：在响应拦截器中，原本应该使用ElMessage来显示成功或错误消息，但由于某些原因（可能是element-plus库的引入问题），这部分逻辑被注释掉了。在实际应用中，你可以根据需要取消注释并正确引入ElMessage。

导出并使用配置好的Axios实例

最后，我们将配置好的Axios实例导出，以便在其他地方使用。

export default service;

通过上述步骤，我们创建并配置了一个Axios实例，并为其添加了请求拦截器和响应拦截器。这使得我们能够更方便地处理HTTP请求和响应，并在需要时执行一些自定义逻辑。