文章摘要
这篇文章介绍了如何使用JavaScript中的`Promise`和`axios`框架来简化后端请求开发。文章指出，`axios`本身的.then()方法会导致代码冗余和复杂，特别是在嵌套多次请求时。通过引入`Promise`，可以优雅地解决这些痛点，提升代码效率。
文章详细讲解了工具的使用方法，包括使用Vite搭建Vue项目、配置axios插件以实现请求拦截功能、封装axios到`http.js`中以创建自定义请求对象，以及在App.vue中如何使用这些封装好的请求方法。同时，文章还提到，这种方法可以在uniapp、微信小程序等多种场景中应用。
通过这种封装方式，一个接口可以节省10行代码，一个项目如果有40个接口，可以节省400行冗余代码，体现了开发效率的显著提升。文章还鼓励读者进一步学习`Promise`的使用和原理，以及手写`Promise`的示例代码。
目录一、为什么要使用promise封装二、如何封装以及使用三、拓展
原生的axios书写是这样的：
axios({
url: 接口地址,
method:请求方法,
data:携带数据,
}).then(res=>{
//请求接口成功的逻辑
}).catch(err=>{
//请求接口失败的逻辑
})
出现了这些问题：
（1）重复的地方特别多，显得代码不够优雅。
(2)后期一旦不使用axios，改用其它第三方访问后端插件，一个个文件去修改，累死宝宝了。
(3)若是axios.then()里面在嵌套多次访问后台请求，业务变得极其复杂，且代码不利于查看。
ES6中的promise横空出世，解决了上面的痛点。axios本身也是一个promise，promise的出现就是为了解决地狱回调的问题(地狱回调至在请求后台成功之后不断嵌套多次异步请求)，这就是为什么使用promise封装axios请求。
本项目使用的工具以及知识点: vue3+vite+axios+es6(promise)+es8(async，await)，薄弱的地方建议先自学。
(1) vite搭建vue3项目控制台所需指令
npm init @vitejs/app
//输入项目名称，选择vue
cd https://www.jb51.net/javascript/项目名称
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 ‘https://www.jb51.net/javascript/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 ‘https://www.jb51.net/javascript/components/HelloWorld.vue’
import { myRequest } from ‘https://www.jb51.net/javascript/utils/http’
import { onMounted } from ‘vue’
//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=”https://www.jb51.net/javascript/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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:JS Promise axios 请求结果后面的.then() 是什么意思详解JavaScript中Promise类的使用方法一文总结JavaScript中Promise遇到的问题Javascript promise异步编程浅析JavaScript使用Promise实现并发请求数限制JavaScript实现手写promise的示例代码JavaScript promise的使用和原理分析