vue 网络请求数据封装

妖狐艹你老母 2021-09-17 22:18 494阅读 0赞

<script type="text/javascript">
        // 配置API接口地址
        const baseUrl = '';
    
        // 引入 弹窗组件
        var modal = weex.requireModule('modal');
        // 引入 请求数据组件
        var stream = weex.requireModule('stream');
    
        // 自定义判断元素类型JS
        function toType (obj) {
            return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
        }
    
        //==============
        // 参数过滤函数
        //==============
        function filterNull (o) {
            for (var key in o) {
                if (o[key] === null) {
                    delete o[key]
                }
                if (toType(o[key]) === 'string') {
                    o[key] = o[key].trim()
                } else if (toType(o[key]) === 'object') {
                    o[key] = filterNull(o[key])
                } else if (toType(o[key]) === 'array') {
                    o[key] = filterNull(o[key])
                }
            }
            return o
        }
    
        //=========
        // 工具方法
        //=========
        function toParams(obj) {
            var param = ""
            for(const name in obj) {
                if(typeof obj[name] != 'function') {
                    param += "&" + name + "=" + encodeURI(obj[name])
                }
            }
            return param.substring(1)
        };
    
        //============
        // 接口处理函数
        //============
        function apiStream (method, url, params, success, failure) {
            // 过滤参数
            if (params) {
                params = filterNull(params)
            }
    
            /*** stream ***/
            if(method === 'GET'){
                console.log("进入了get方法")
                // GET 方法
                stream.fetch({
                    method: 'GET',
                    type: 'text',
                    url: baseUrl + url + toParams(params)
                }, function(res) {
                    if (res.ok) {
                        // 解密
                        let currentData = jwtdecode.decode(res.data, 'michahzdee2016', 'HS256');
                        success(currentData);
                    }else {
                        modal.toast({
                            message: '请求失败,请检查网络!',
                            duration: 2
                        })
                    }
                })
            }else if(method === 'POST'){
                // POST 方法
                stream.fetch({
                    method: 'POST',
                    type: 'text',
                    url: baseUrl + url,
                    headers: {'Content-Type':'application/x-www-form-urlencoded'},
                    body: toParams(params)
                }, function(res) {
                    if (res.ok) {
                        // 解密
                        let currentData = jwtdecode.decode(res.data, 'michahzdee2016', 'HS256');
                        success(currentData);
                    }else {
                        modal.toast({
                            message: '请求失败,请检查网络!',
                            duration: 2
                        })
                    }
                },function(progress) {
                    //
                })
            }
        };
    
        //========================
        // 返回在vue模板中的调用接口
        //========================
        export default {
            // get方法
            get: function (url, params, success, failure) {
                return apiStream('GET', url, params, success, failure)
            },
            // post方法
            post: function (url, params, success, failure) {
                return apiStream('POST', url, params, success, failure)
            },
            // 用于查看域名 || 服务器地址
            globalHttpUrl:baseUrl
        }
    
    </script>

使用

import global from './common.vue'
    
    
    global.get('/api/user/channel/downloadInfo/get', params, function(data) {
    
          })
          this.COMMON.commonFun()

发表评论取消回复

表情：

评论列表（有 0 条评论，494人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-封装axios请求

最近接手新的vue项目，发现axios竟然没有封装，立马动手封装，这里记录一下完整的封装过程，废话不说，直接上代码 baseConfig.js文件 //存放各个服

超、凢脫俗/ 2023年07月25日 08:43/ 0 赞/ 13 阅读

相关 Vue项目封装请求数据的接口总结

[Vue项目封装请求数据的接口总结][Vue] 最近开始了第一份工作，对于前端新手小白，以前的惯用做法都是直接在需要的页面写请求数据的接口。但是因为项目中会频繁的请

柔情只为你懂/ 2023年06月27日 11:23/ 0 赞/ 2 阅读

相关 vue axios请求封装

axios.defaults.baseURL = 'http://172.16.26.133:8080/XCPS'; //填写域名 //http request

红太狼/ 2023年01月03日 14:17/ 0 赞/ 273 阅读

相关 uni-app网络请求封装（和vue网络请求的方法类似）

我这里分为三个文件js方便管理 env.js（管理请求的网络地址） request.js（接口调用的文件） servixe.js（接口的请求代码） e

系统管理员/ 2022年12月27日 11:28/ 0 赞/ 175 阅读

相关 vue 封装axios 请求

[https://www.cnblogs.com/ldlx-mars/p/7908950.html][https_www.cnblogs.com_ldlx-mars_p_790

╰半橙微兮°/ 2022年12月25日 15:51/ 0 赞/ 230 阅读

相关网络请求框架封装(NetWorkUtils)

效果图： ![NetWorkUtils.gif][] 项目描述：网络请求框架二次封装，目前完成了基于OkHttp的get/post/postJson/uplo

逃离我推掉我的手/ 2022年05月21日 03:27/ 0 赞/ 240 阅读

相关小程序网络请求封装

目录结构 ... ├── images ├── api │ └── index.js // 首页的接口 │ └── classify.js

爱被打了一巴掌/ 2022年02月26日 12:52/ 0 赞/ 278 阅读

相关 uniapp 数据网络请求封装以及通用使用

index.js import http from './interface' / 将业务所有接口统一起来便于维护如果

缺乏、安全感/ 2021年09月19日 13:48/ 0 赞/ 738 阅读

相关 uniapp unirequest 网络请求封装

import urlConfig from './config.js' const request = {} const headers

╰半橙微兮°/ 2021年09月17日 22:36/ 0 赞/ 526 阅读

相关 vue 网络请求数据封装

<script type="text/javascript"> // 配置API接口地址 const baseUrl = '';

妖狐艹你老母/ 2021年09月17日 22:18/ 0 赞/ 495 阅读