Vue3 Axios拦截器封装成request文件的示例详解

1. Vue3 Axios拦截器封装成request文件的示例详解

在Vue3项目中，我们通常会使用Axios来请求数据。为了增强代码的可维护性和重用性，我们可以将Axios的拦截器封装成一个request文件，方便统一管理和调用。下面是示例代码：

request.js

import axios from 'axios';
import { getToken } from '@/utils/auth';

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000,
});

// request拦截器
service.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    if (getToken()) {
      config.headers['Authorization'] = `Bearer ${getToken()}`;
    }
    return config;
  },
  (error) => {
    // 处理请求错误
    console.log(error);
    return Promise.reject(error);
  }
);

// response拦截器
service.interceptors.response.use(
  (response) => {
    // 对响应数据做点什么
    const res = response.data;
    if (res.code !== 20000) {
      console.log('请求异常：', res.message || 'Error');
    } else {
      return res.data;
    }
  },
  (error) => {
    // 处理响应错误
    console.log('请求错误：', error);
    return Promise.reject(error);
  }
);

export default service;

在这个示例中，我们首先import了Axios包和token相关的方法，然后创建了一个axios实例service。接着在这个实例上定义了一个request拦截器和一个response拦截器。在request拦截器中，我们首先判断token是否存在，如果存在则将token添加到请求头中。在response拦截器中，我们对响应数据进行了处理，对于非20000状态码的响应，我们输出了请求异常，并返回一个Promise.reject()；对于20000状态码的响应，我们返回了res.data数据。

最后，我们将这个service实例导出，在需要使用Axios的地方只需要import这个文件即可。

使用示例

import request from '@/utils/request';

request({
  url: '/api/user/list',
  method: 'get',
}).then((res) => {
  console.log(res);
});

在使用时，只需要import需要使用的request即可，无需重复代码。

1. Axios封装文件上传示例

在实际开发中，我们可能需要上传文件，这涉及到FormData的使用。同样，我们可以将Axios的封装和文件上传封装成一个方法，这样方便复用，提高代码的可维护性。下面是示例代码：

utils.js

import request from '@/utils/request';

/**
 * 上传文件
 * @param {FormData} file
 */
export function uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file);
  return request({
    url: '/api/upload/file',
    method: 'post',
    data: formData,
  });
}

在这个示例中，我们首先import了Axios封装，然后定义了一个uploadFile方法。在该方法中，我们创建了一个FormData对象，并向其中添加文件。然后我们使用request方法来发送post请求，并将FormData作为data参数传入。

使用示例

import { uploadFile } from '@/utils/utils';

const file = document.querySelector('input[type="file"]').files[0];
uploadFile(file).then((res) => {
  console.log(res);
});

在使用时，只需要import需要使用的方法即可，无需重复代码。同时，也可以将这个方法进一步封装，比如添加上传进度等功能。