本文详解如何在Vue3与Vite项目中，利用ES6 Promise及async/await机制对Axios进行封装。通过统一处理请求拦截、响应拦截及错误处理，消除冗余代码，解决地狱回调问题，显著提升后端接口调用的优雅性与可维护性。
一、为什么要使用promise封装
原生Axios的调用方式通常如下所示：
axios({
url: 接口地址,
method:请求方法,
data:携带数据,
}).then(res=>{
//请求接口成功的逻辑
}).catch(err=>{
//请求接口失败的逻辑
})这种原始写法存在以下明显缺陷：
首先，大量重复代码导致整体结构不够简洁优雅。
其次，若未来不再使用Axios而替换为其他后端访问库，需逐个文件修改调用逻辑，维护成本极高。
此外，若在axios.then()内部嵌套多次后台请求，业务逻辑将变得极其复杂，且代码可读性大幅降低。
ES6引入的Promise有效解决了上述痛点。由于Axios本身基于Promise实现，其核心目的正是为了解决“地狱回调”问题（即在后台请求成功后，不断嵌套执行多次异步请求）。因此，使用Promise对Axios进行封装是提升代码质量的必要手段。
二、如何封装以及使用
本项目采用的技术栈包括Vue3、Vite、Axios、ES6（Promise）以及ES8（async/await）。若对其中部分知识掌握不足，建议先行自学。
(1) 使用Vite搭建Vue3项目所需的控制台指令
npm init @vitejs/app //输入项目名称，选择vue cd ./项目名称 npm i //安装依赖 npm run dev //运行项目 npm install axios //安装axios依赖
(2) 在request.js中配置Axios基础设置
import axios from 'axios'
const baseURL='http://localhost:8888/lostFound' //后台接口的域名或者服务器地址
//请求拦截，会自动在axios请求后端的时候添加请求头，并将token添加到请求里面
const service =axios.interceptors.request.use(config => {
if (localStorage.getItem('token')) {
config.headers.token = localStorage.getItem('token');
}
return config;
}, error => { return Promise.reject(error) })
//响应拦截，将后端传回来的token放在localStorage缓存里
service.interceptors.response.use(response => {
localStorage.setItem("token", response.headers.token);
return response;
})
export default service(3) 在http.js中封装Axios请求逻辑
import service from './request'
//封装axios请求
const myRequest = options => {
return new Promise((resolve, reject) => {
service({
url: options.url,
method: options.method || 'GET',
data: options.data || {},
params: options.params || {}
}).then(res => resolve(res)) //请求成功
.catch(err => reject(err)) //请求失败
})
}
export default myRequest(4) 在App.vue组件中调用封装好的接口
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { myRequest } from './utils/http'
import { onMounted } from 'vue'
/**
* await后面跟一个promise，await可以省略很多.then的书写，让promise更加简洁优雅,await要在async函数体内使用
*/
//get不携带参数获取数据
const getWithNoParameters = async () => {
let res = await myRequest({ url: '/selectAllCategories'})
console.log('get不携带参数',res)
}
//get携带参数
const getWithParameters = async ()=>{
let params={
id:10
}
let res=await myRequest({url:'/selectFoundDetailById',params})
console.log('get携带参数',res)
}
//post请求方式
const post = async()=>{
let formData=new FormData()
formData.append('sno','1')
formData.append('password','1')
let res=await myRequest({url:'/login',method:'post',data:formData})
console.log('post:',res)
}
//生命周期钩子函数
onMounted(() => {
getWithNoParameters()
getWithParameters()
post()
})
</script>
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + Vite" />
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>(4) 运行结果展示
(5) 结果分析
每个接口功能可节省约10行代码。假设项目包含40个接口，即可减少400行冗余代码，充分体现了精益求精的编码规范。
三、拓展
//uniapp中也可以这样封装后端请求api
export myRequest= options =>{
return new Promise((resolve,reject)=>{
uni.request({
url: options.url,
method:options.method || 'GET',
data: options.data || {},
success: res=>{
//请求后台成功
resolve(res)
},
fail: err=>{
//请求后台失败
reject(err)
}
}
})
})
}
//微信小程序中也可以这样封装后端请求api
export myRequest= options=>{
return new Promise((resolve,reject)=>{
wx.request({
url: options.url,
method:options.method || 'GET',
data: options.data || {},
success(res){
//请求后台成功
resolve(res)
},
fail(err){
//请求后台失败
reject(err)
}
}
})
})
}至此，关于JavaScript使用Promise封装Axios进行高效开发的介绍完毕。如需了解更多JS使用Promise封装Axios相关内容，请搜索本站历史文章或继续浏览后续文章，感谢支持！