vue 网络请求数据封装

妖狐艹你老母 2021-09-17 22:18 620阅读 0赞 
  1. <script type="text/javascript">
  2.     // 配置API接口地址
  3.     const baseUrl = '';
  5.     // 引入 弹窗组件
  6.     var modal = weex.requireModule('modal');
  7.     // 引入 请求数据组件
  8.     var stream = weex.requireModule('stream');
  10.     // 自定义判断元素类型JS
  11.     function toType (obj) {
  12.         return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
  13.     }
  15.     //==============
  16.     // 参数过滤函数
  17.     //==============
  18.     function filterNull (o) {
  19.         for (var key in o) {
  20.             if (o[key] === null) {
  21.                 delete o[key]
  22.             }
  23.             if (toType(o[key]) === 'string') {
  24.                 o[key] = o[key].trim()
  25.             } else if (toType(o[key]) === 'object') {
  26.                 o[key] = filterNull(o[key])
  27.             } else if (toType(o[key]) === 'array') {
  28.                 o[key] = filterNull(o[key])
  29.             }
  30.         }
  31.         return o
  32.     }
  34.     //=========
  35.     // 工具方法
  36.     //=========
  37.     function toParams(obj) {
  38.         var param = ""
  39.         for(const name in obj) {
  40.             if(typeof obj[name] != 'function') {
  41.                 param += "&" + name + "=" + encodeURI(obj[name])
  42.             }
  43.         }
  44.         return param.substring(1)
  45.     };
  47.     //============
  48.     // 接口处理函数
  49.     //============
  50.     function apiStream (method, url, params, success, failure) {
  51.         // 过滤参数
  52.         if (params) {
  53.             params = filterNull(params)
  54.         }
  56.         /*** stream ***/
  57.         if(method === 'GET'){
  58.             console.log("进入了get方法")
  59.             // GET 方法
  60.             stream.fetch({
  61.                 method: 'GET',
  62.                 type: 'text',
  63.                 url: baseUrl + url + toParams(params)
  64.             }, function(res) {
  65.                 if (res.ok) {
  66.                     // 解密
  67.                     let currentData = jwtdecode.decode(res.data, 'michahzdee2016', 'HS256');
  68.                     success(currentData);
  69.                 }else {
  70.                     modal.toast({
  71.                         message: '请求失败,请检查网络!',
  72.                         duration: 2
  73.                     })
  74.                 }
  75.             })
  76.         }else if(method === 'POST'){
  77.             // POST 方法
  78.             stream.fetch({
  79.                 method: 'POST',
  80.                 type: 'text',
  81.                 url: baseUrl + url,
  82.                 headers: {'Content-Type':'application/x-www-form-urlencoded'},
  83.                 body: toParams(params)
  84.             }, function(res) {
  85.                 if (res.ok) {
  86.                     // 解密
  87.                     let currentData = jwtdecode.decode(res.data, 'michahzdee2016', 'HS256');
  88.                     success(currentData);
  89.                 }else {
  90.                     modal.toast({
  91.                         message: '请求失败,请检查网络!',
  92.                         duration: 2
  93.                     })
  94.                 }
  95.             },function(progress) {
  96.                 //
  97.             })
  98.         }
  99.     };
  101.     //========================
  102.     // 返回在vue模板中的调用接口
  103.     //========================
  104.     export default {
  105.         // get方法
  106.         get: function (url, params, success, failure) {
  107.             return apiStream('GET', url, params, success, failure)
  108.         },
  109.         // post方法
  110.         post: function (url, params, success, failure) {
  111.             return apiStream('POST', url, params, success, failure)
  112.         },
  113.         // 用于查看域名 || 服务器地址
  114.         globalHttpUrl:baseUrl
  115.     }
  117. </script>

使用

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

发表评论

表情：
评论列表 （有 0 条评论，620人围观）

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

相关阅读

    相关 vue-封装axios请求

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

    超、凢脫俗超、凢脫俗/ 0 赞/ 157 阅读