vue3 + vite + typescript封装axios及使用，上传、导入，下载、导出

1、封装axios

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import userStore from '@/stores/modules/user'

// 创建 axios 实例
const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,  //环境变量配置baseURL
  timeout: 50000
})

// 请求拦截器
service.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    if (!config.headers) {
      throw new Error(`headers is not defined`)
    }
    const user = userStore()
    if (user.token) {
      config.headers.token = user.token   //请求头设置token
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  (response: AxiosResponse) => {
    const user = userStore()
    const { code, msg } = response.data
    // 响应数据为二进制流处理
    if (response.data instanceof ArrayBuffer || response.data instanceof Blob) {
      return response
    }
    if (code === 401) {
      // 无权限, 退出并跳转到登录页
      user.logout().then(() => {
        window.location.href = '/'
      })
      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
    } else if (code === 500) {
      ElMessage.error(msg || '系统出错')
    } else if (code !== 200) {
      ElMessage.warning(msg)
    } else {
      return response.data
    }
  },
  (error) => {
    const { status, data } = error.response
    if (status === 401) {
      // token 过期清除缓存重新登录
      // localStorage.clear()
      ElMessageBox.alert('当前页面已失效，请重新登录', '提示', {
        confirmButtonText: '确定',
        callback: () => {
          // 跳转登录页
          window.location.href = '/'
        }
      })
    } else {
      ElMessage({
        message: data.msg || '系统出错',
        type: 'error'
      })
    }
    return Promise.reject(new Error(data.msg || 'Error'))
  }
)

// 导出 axios 实例
export default service

2、api目录下创建task/index.ts文件

import request from '@/utils/request'

// post请求
export function addTask(params: any) {
	return request({
		url: `/task/addTask`,
		method: 'post',
		data: params
	})
}

// get请求
export function getTask(params: any) {
	return request({
		url: `/task/getTask`,
		method: 'get',
		params
	})
}

// 下载或导出
export function exportTask(params: any) {
	return request({
		url: '/task/exportTask',
		method: 'post',
		responseType: 'blob',
		params
	})
}

// 上传或导入
export function importTask(params: any, data: any) {
	return request({
		url: '/task/importTask',
		method: 'post',
		headers: {
			contentType: 'multipart/form-data'
		},
		params,
        data
	})
}

3、页面发送请求

        下载导出需要安装file-saver插件

        1、npm install file-saver --save

        2、npm install @types/file-saver --save-dev

import { getTask, importTask, exportTask } from '@/api/task/index'
import { saveAs } from 'file-saver'

// 普通请求
const getData = async () => {
    let params = {
        id: 1
    }
	const { code, data } = await getTask (params)
}
// 导入
const upload = () => {
	const formDates = new FormData()
	formDates.append('file', file)
	let parmas = {
		id: 1
	}
	importTask(parmas, formDates).then((res: any) => {
        
	})
}
// 导出
const export = () => {
	let parmas = {
		id: 1
	}
	exportTask (parmas).then((res: any) => {
		saveAs(res.data, `exportData.xlsx`)
	})
}