deepseek:封装一个axios

封装一个包含上传和下载文件功能的 axios 实例，可以提高代码的复用性和可维护性。以下是一个完整的封装示例，支持文件上传、下载、以及常规的 GET/POST 请求。

---

封装代码

import axios from 'axios';

// 创建 axios 实例
const http = axios.create({
  baseURL: 'https://api.example.com', // 基础 URL
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json', // 默认请求头
  },
});

/**
 * 封装 GET 请求
 * @param {string} url 请求地址
 * @param {object} params 请求参数
 * @returns {Promise} 返回请求结果
 */
export const get = (url, params = {}) => {
  return http.get(url, { params });
};

/**
 * 封装 POST 请求
 * @param {string} url 请求地址
 * @param {object} data 请求体数据
 * @returns {Promise} 返回请求结果
 */
export const post = (url, data = {}) => {
  return http.post(url, data);
};

/**
 * 封装文件上传
 * @param {string} url 请求地址
 * @param {FormData} formData 表单数据
 * @param {object} config 额外配置（如上传进度回调）
 * @returns {Promise} 返回请求结果
 */
export const upload = (url, formData, config = {}) => {
  return http.post(url, formData, {
    headers: {
      'Content-Type': 'multipart/form-data', // 设置为多部分表单
    },
    ...config,
  });
};

/**
 * 封装文件下载
 * @param {string} url 请求地址
 * @param {object} params 请求参数
 * @returns {Promise} 返回文件 Blob 数据
 */
export const download = (url, params = {}) => {
  return http.get(url, {
    params,
    responseType: 'blob', // 响应类型为二进制流
  });
};

// 请求拦截器
http.interceptors.request.use(
  (config) => {
    // 在请求发送之前做一些处理（如添加 token）
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
http.interceptors.response.use(
  (response) => {
    // 对响应数据做一些处理
    return response.data;
  },
  (error) => {
    // 对响应错误做一些处理
    return Promise.reject(error);
  }
);

export default http;

---

使用示例

1. 发送 GET 请求

import { get } from './http';

get('/user', { id: 1 })
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

2. 发送 POST 请求

import { post } from './http';

post('/user', { name: 'John', age: 30 })
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

3. 上传文件

import { upload } from './http';

const fileInput = document.querySelector('input[type="file"]');
const formData = new FormData();
formData.append('file', fileInput.files[0]);

upload('/upload', formData, {
  onUploadProgress: (progressEvent) => {
    const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);
    console.log(`上传进度: ${percent}%`);
  },
})
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

4. 下载文件

import { download } from './http';

download('/download', { fileId: 123 })
  .then((blob) => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'file.pdf'; // 设置下载文件名
    a.click();
    window.URL.revokeObjectURL(url);
  })
  .catch((error) => console.error(error));

---

功能说明

1. 请求拦截器：

   • 在请求发送前统一添加 token 或其他请求头。

2. 响应拦截器：

   • 对响应数据进行统一处理，例如提取 data 字段或处理错误。

3. 文件上传：

   • 使用 FormData 对象，支持多部分表单上传。
   • 支持上传进度回调。

4. 文件下载：

   • 通过 responseType: 'blob' 获取二进制文件流。
   • 使用 URL.createObjectURL 和 <a> 标签实现文件下载。

5. 通用请求方法：

   • 提供 get 和 post 方法，支持常规请求。

---

总结

这个封装实现了文件上传、下载以及常规请求的功能，同时通过拦截器统一处理请求和响应逻辑，适合大多数前端项目使用。