JavaScript使用Promise封装Axios进行高效开发

夕颜花开

一、为什么要使用promise封装

原生的axios书写是这样的：

1. axios({
   
2.   url: 接口地址,
   
3.   method:请求方法,
   
4.   data:携带数据,
   
5. }).then(res=>{
   
6.   //请求接口成功的逻辑
   
7. }).catch(err=>{
   
8.   //请求接口失败的逻辑
   
9. })

复制代码

出现了这些问题：
（1）重复的地方特别多，显得代码不够优雅。
(2)后期一旦不使用axios，改用其它第三方访问后端插件，一个个文件去修改，累死宝宝了。
(3)若是axios.then()里面在嵌套多次访问后台请求，业务变得极其复杂，且代码不利于查看。
ES6中的promise横空出世，解决了上面的痛点。axios本身也是一个promise，promise的出现就是为了解决地狱回调的问题(地狱回调至在请求后台成功之后不断嵌套多次异步请求)，这就是为什么使用promise封装axios请求。

二、如何封装以及使用

本项目使用的工具以及知识点: vue3+vite+axios+es6(promise)+es8(async，await)，薄弱的地方建议先自学。
(1) vite搭建vue3项目控制台所需指令

1. npm init @vitejs/app//输入项目名称，选择vuecd ./项目名称npm i        //安装依赖npm run dev     //运行项目npm install  axios     //安装axios依赖 

复制代码

(2)request.js 配置axios

1. import axios from 'axios'
   
2. const baseURL='http://localhost:8888/lostFound'   //后台接口的域名或者服务器地址
   
3. //请求拦截，会自动在axios请求后端的时候添加请求头，并将token添加到请求里面
   
4. const service =axios.interceptors.request.use(config => {
   
5.     if (localStorage.getItem('token')) {
   
6.         config.headers.token = localStorage.getItem('token');
   
7.     }
   
8.     return config;
   
9. }, error => { return Promise.reject(error) })
   
10. //响应拦截，将后端传回来的token放在localStorage缓存里
    
11. service.interceptors.response.use(response => {
    
12.     localStorage.setItem("token", response.headers.token);
    
13.     return response;
    
14. })
    
15. export default service

复制代码

(3)http.js中封装axios

1. import service from './request'
   
2. //封装axios请求
   
3. const myRequest = options => {
   
4.   return new Promise((resolve, reject) => {
   
5.     service({
   
6.       url: options.url,
   
7.       method: options.method || 'GET',
   
8.       data: options.data || {},
   
9.       params: options.params || {}
   
10.     }).then(res => resolve(res))  //请求成功
    
11.       .catch(err => reject(err))  //请求失败
    
12.   })
    
13. }
    
14. export default myRequest

复制代码

(4)在App.vue使用

1. <script setup>
   
2. import HelloWorld from './components/HelloWorld.vue'
   
3. import { myRequest } from './utils/http'
   
4. import { onMounted } from 'vue'
   
5. /**
   
6. * await后面跟一个promise，await可以省略很多.then的书写，让promise更加简洁优雅,await要在async函数体内使用
   
7. */  
   
8. //get不携带参数获取数据
   
9. const getWithNoParameters = async () => {
   
10.   let res = await myRequest({ url: '/selectAllCategories'})
    
11.   console.log('get不携带参数',res)
    
12. }
    
13. //get携带参数
    
14. const getWithParameters = async ()=>{
    
15.   let params={
    
16.     id:10
    
17.   }
    
18.   let res=await myRequest({url:'/selectFoundDetailById',params})
    
19.   console.log('get携带参数',res)
    
20. }
    
21. //post请求方式
    
22. const post = async()=>{
    
23.   let formData=new FormData()
    
24.   formData.append('sno','1')
    
25.   formData.append('password','1')
    
26.   let res=await myRequest({url:'/login',method:'post',data:formData})
    
27.   console.log('post:',res)
    
28. }
    
29. //生命周期钩子函数
    
30. onMounted(() => {
    
31.   getWithNoParameters()
    
32.   getWithParameters()
    
33.   post()
    
34. })
    
35. </script>
    
36. <template>
    
37.   <img alt="Vue logo" src="./assets/logo.png" />
    
38.   <HelloWorld msg="Hello Vue 3 + Vite" />
    
39. </template>
    
40. <style>
    
41. #app {
    
42.   font-family: Avenir, Helvetica, Arial, sans-serif;
    
43.   -webkit-font-smoothing: antialiased;
    
44.   -moz-osx-font-smoothing: grayscale;
    
45.   text-align: center;
    
46.   color: #2c3e50;
    
47.   margin-top: 60px;
    
48. }
    
49. </style>

复制代码

(4)运行结果：

(5)分析：
一个接口功能省下10行代码，一个项目假设有40个接口，你就能省下400行冗余代码了，感受到了精益求精的工匠精神。

三、拓展

1. //uniapp中也可以这样封装后端请求api
   
2. export myRequest= options =>{
   
3.   return new Promise((resolve,reject)=>{
   
4.     uni.request({
   
5.       url: options.url,
   
6.       method:options.method || 'GET',
   
7.       data: options.data || {},
   
8.       success: res=>{
   
9.         //请求后台成功
   
10.         resolve(res)
    
11.       },
    
12.       fail: err=>{
    
13.               //请求后台失败
    
14.         reject(err)
    
15.       }
    
16.     }
    
17.     })
    
18.   })
    
19. }
    
20. //微信小程序中也可以这样封装后端请求api
    
21. export myRequest= options=>{
    
22.   return new Promise((resolve,reject)=>{
    
23.     wx.request({
    
24.       url: options.url,
    
25.       method:options.method || 'GET',
    
26.       data: options.data || {},
    
27.       success(res){
    
28.         //请求后台成功
    
29.         resolve(res)
    
30.       },
    
31.       fail(err){
    
32.               //请求后台失败
    
33.         reject(err)
    
34.       }
    
35.     }
    
36.     })
    
37.   })
    
38. }

复制代码

到此这篇关于JavaScript使用Promise封装Axios进行高效开发的文章就介绍到这了,更多相关JS使用Promise封装Axios内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/284482h0q.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！