首页 > Web开发 > 详细

小程序发起请求和上传图片的封装

时间:2018-01-30 18:11:43      阅读:211      评论:0      收藏:0      [点我收藏+]

发起请求的封装

  在进行页面交互过程中,需要多次与服务器进行数据的交换,所以对发起请求的封装就显得尤为重要。

  在小程序项目中新增一个utils/api.js文件

  代码如下:

  1  // 服务器的基础域名
  2 var baseAPI = ‘http://192.168.1.36:8080/hires/‘;
  3  //上传图片服务器的基础域名
  4 var imgAPI = ‘http://192.168.1.36:8080/hires/‘;
  5 
  6 const _extend = (target, options) => {
  7   if (typeof target !== ‘object‘ || typeof options !== ‘object‘) {
  8     return;
  9   }
 10   let name;
 11   for (name in options) {
 12     if (options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
 13       target[name] = options[name];
 14     }
 15   }
 16   return target;
 17 };
 18 const jyAjax = obj => {
 19   let data = obj.data || {};
 20   data = _extend(data, {
 21     unitId: ‘100001‘,
 22     timeStamp: new Date().getTime(),
 23     // token: wx.getStorageSync(‘token‘) || ‘‘,
 24     token:‘123456‘
 25   });
 26  27   for (const key in data) {
 28     if (data.hasOwnProperty(key) && data[key] == ‘undefined‘ || data[key] == undefined) {
 29       console.log(‘传递参数undefined,key值为:‘ + key + ‘,接口地址为:‘ + obj.url);
 30       console.log(‘页面为:‘ + getCurrentPages()[getCurrentPages().length - 1].route);
 31     }
 32   }
 33   if (obj.isShowLoading !== false) {
 34     obj.isShowLoading = true;
 35   }
 36   if (obj.isShowLoading) {
 37     wx.showLoading({
 38       title: ‘加载中..‘,
 39     });
 40   };
 41   wx.request({
 42     url: baseAPI + obj.url,
 43     method: ‘POST‘,
 44     header: {
 45       ‘Content-Type‘: ‘application/x-www-form-urlencoded;charset=utf-8;‘ // 默认值
 46     },
 47     data: data,
 48     success: (res) => {
 49  50       if (res.data.code == -2) {
 51         let nowWebview = getCurrentPages()[getCurrentPages().length - 1];
 52         let nowWebviewUrl = nowWebview.route;
 53         let nowWebviewOptions = nowWebview.options;
 54         let fullUrl = nowWebviewUrl + ‘?‘;
 55         for (const key in nowWebviewOptions) {
 56           if (nowWebviewOptions.hasOwnProperty(key)) {
 57             fullUrl = fullUrl + key + ‘=‘ + nowWebviewOptions[key] + ‘&‘;
 58           }
 59         };
 60         fullUrl = ‘/‘ + fullUrl.substring(0, fullUrl.length - 1);
 61         wx.setStorageSync(‘beforeLoginPage‘, fullUrl);
 62       } else if (res.data.code == -9) {
 63         wx.showModal({
 64           title: ‘提示‘,
 65           content: ‘服务器繁忙,请稍后再试‘,
 66           showCancel: false
 67         })
 68       }else {
 69         if (typeof obj.success == ‘function‘) { obj.success(res.data); }
 70       }
 71     },
 72     fail: (res) => {
 73       if (typeof obj.error == ‘function‘) { obj.error(res.data); }
 74     },
 75     complete: (res) => {
 76       if (obj.isShowLoading) {
 77         wx.hideLoading();
 78       };
 79       if (typeof obj.complete == ‘function‘) { obj.complete(res.data); }
 80     }
 81   })
 82 };

 

上传图片的封装

  在上面的api.js文件新增代码:

 1 const imgUpload = obj => {
 2   let imgUrl = obj.imgUrl;
 3 
 4   let url = baseAPI + "doFileUpload?token=123456";
 5   wx.uploadFile({
 6     url: url,
 7     filePath: imgUrl,
 8     name: ‘file‘,
 9     success: function (res) {
10       if (typeof obj.success == ‘function‘) { obj.success(res); }
11     },
12     complete: function (res) {
13       console.log(res);
14     }
15   })
16 }

暴露接口

  在最后暴露接口给需要引用的文件

1 //暴露模块接口
2 module.exports = { jyAjax: jyAjax, imgUpload: imgUpload, baseAPI: baseAPI, imgAPI: imgAPI };

设置为全局变量

  在app.js把暴露的接口放在全局变量中,可以被所有文件引用。

let jyAjax = require(‘utils/api.js‘);
//app.js
App({
  jyAjax: jyAjax.jyAjax,
  imgUpload: jyAjax.imgUpload,
})

应用  

  引用例子:

//获取应用实例
const app = getApp();
Page({
  data: {
   
  },
  onLoad: function () {
    app.jyAjax({
      url:‘app/mine/home/appHome.py‘,
      success:(res)=>{
        
      }
    })
  },
})

 

小程序发起请求和上传图片的封装

原文:https://www.cnblogs.com/wxw1314/p/8385657.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!