分享自己的axios封装,适用于后台管理项目(vue3)

先简单演示一下使用

import { get, save } from '@/utils'
//查询
async function getList() {
    const res = await get('xxxx/xxxx', queryParams)
    res.success && (tableData.value = res.data, total.value = res.total)
}
//新增
async function saveData() {
    save('xxxx/xxxx', ruleForm, getList)
}

接下来看封装的js文件 utils/request.js(第一步)

import axios from 'axios'
import { useRouter } from 'vue-router'
import store from '@/store'    //reactive创建的全局公共数据
import { message } from 'ant-design-vue'
import loading from '@/utils/loading'   //个人封装的全局loading
const router = useRouter()
export const baseURL = window.baseURL    //将baseURL配置在index.html,后端人员可自行修改
const service = axios.create({
	baseURL: process.env.NODE_ENV === 'development' ? '/xinkai' : window.baseURL,
	timeout: 6000,
	method: 'post'
})
// request拦截器
service.interceptors.request.use(
	config => {
		if (store.token) {
			config.headers['xxxx'] =  store.token
			config.headers.post['Content-Type'] = 'application/json'
		}
		loading.show()
		return config
	},
	error => {
		loading.close()
		message.error('本地网络异常,请尝试刷新')
		return Promise.resolve(error)   //这里的resolve是关键,不用reject是方便await处理异常
	}
)
// response 拦截器
service.interceptors.response.use(
	response => {
		loading.close()
		if(response.config.responseType==='blob'){
                //这里是对后台返回二进制文件的简单封装
			const filename = response.headers['content-disposition'].split("filename=")[1]
			return{
				data:response.data,
				success:true,
				filename:decodeURIComponent(filename)
			}
		}
		return response.data
	},
	error => {
		loading.close()
		if (error.response && error.response.status === 401) {
			router.push('/login')
			message.error('登录状态过期,正在跳转到登录页...')
		} else {
			message.error('服务器异常,请尝试刷新')
			console.log(error)
		}
		return Promise.resolve(error)    //这里的resolve是关键,不用reject是方便await处理异常
	}
)

export default service

utils/index.js(第二步)

import { message, Modal } from 'ant-design-vue'
import request from '@/utils/request'

//查询
export function get(url,data){
    data && data.page && (data.rows = 10) //配置一个默认分页页码
    return request({ url, data })
}
//删除
export async function del(url,data,cb){
    Modal.confirm({
        content: '确定要删除吗?',
        centered: true,
        onOk: async () => {
        
            const res = await request({ url, data })  
            if (res.success) {
                message.success('删除成功')
                cb()    
            } else {
                message.error(res.desc)
            }
        }
    })
}
//新增或修改
export async function save(url,data,cb){
    const res = await request({ url, data })   
    if (res.success) {
        message.success('保存成功')
        cb && cb()    
        return Promise.resolve(res)
    } else {
        message.error(res.desc)
    }
}
//处理二进制
export async function download(url,cb){
    const res = await request({ url, responseType: 'blob',method:'get',timeout:30000 })
    if(!res.success) return message.error('下载失败')
    var blob = new Blob([res.data])
    var url = window.URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = res.filename
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a);  
    cb && cb()   
}

补充一点,没有写请求methods是因为公司后台统一用post请求,有点难受...