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

Posted 2020-10-22 wxw婉

发起请求的封装

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

　　在小程序项目中新增一个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)=>{
        
      }
    })
  },
})