夜散点炽
夜散点炽
  • 发布:2025-01-23 15:59
  • 更新:2025-01-23 17:00
  • 阅读:76

vue3项目,想正规的封装一下网络请求

分类:uni-app

查了网友的的封装大部分是在uni.request外面套一层,
不是我想要的,这样封装太不灵活,成功和失败都在成功回调中,太乱了,
首选当然是用拦截器封装,但可查资料太少,我测试了好多天,完成了微信小程序和H5的封装,
APP还是没搞明白,一个原因也是我的工具不支持vue3的断点调试,不知道大家的工具行不行,
这边我把自己调好的成果和大家分享一下

uni.addInterceptor('request', {//请求拦截  
    invoke(args){  
         //这边可以添加  token 和   IP  
             //还可以根据IP和data判断是否重复请求,  
            //正常请求就添加请求列队  
             //拦截重复的请求可以返回false           
    return true  
    },  
    returnValue(args){//实现分流,只要200走  success    其它都走    fail  
        if(args){  //在invoke 中被拦截的请求,这边会是空指针,所以要判断  
            // #ifdef MP-WEIXIN  
            args.onHeadersReceived((res)=>{  
                if(res.statusCode==200){  
                                       //什么都不执行则回调   success  
                                  }else{  
                                      args.abort();//回调   fail  
                                }  
            })  
            //#endif  
            // #ifdef H5  
            args._xhr.onreadystatechange = (res) =>{  
                if(args._xhr.readyState==4){  
                    if(res.target.status==200){  
                                       args._xhr.onload();//成功回调   success  
                                          }else{  
                                              args._xhr.onerror(); //失败回调   fail  
                                        }  
                }  
            }  
            // #endif  
        }  
    },  
    success(res){  
                //这边是可以改造res值的,不要直接赋值,引用类型,你懂得  
    },  
    complete(res,obj) {  
        //请求结束,可以根据第二参数,移除请求列队,防止重复请求             
    }  
});

好了,以上就是我的成果,希望对大家有帮助,现在还差APP端,实在是工具打不了断点,连返回的对象有哪些方法参数都看不了,又找不到这方面的资料,在线等呀,我的QQ:83606260,微信:15659558682 有懂的小伙伴告诉我 一下哈

2025-01-23 15:59 负责人:无 分享
已邀请:
蔡cai

蔡cai

可以console.log打印出来

要回复问题请先登录注册