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

发起请求的封装

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

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

　　代码如下：

 // 服务器的基础域名
var baseAPI = 'http://192.168.1.36:8080/hires/';
 //上传图片服务器的基础域名
var imgAPI = 'http://192.168.1.36:8080/hires/';

const _extend = (target, options) => {
  if (typeof target !== 'object' || typeof options !== 'object') {
    return;
  }
  let name;
  for (name in options) {
    if (options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
      target[name] = options[name];
    }
  }
  return target;
};
const jyAjax = obj => {
  let data = obj.data || {};
  data = _extend(data, {
    unitId: '100001',
    timeStamp: new Date().getTime(),
    // token: wx.getStorageSync('token') || '',
    token:'123456'
  });
 27   for (const key in data) {
    if (data.hasOwnProperty(key) && data[key] == 'undefined' || data[key] == undefined) {
      console.log('传递参数undefined,key值为：' + key + ',接口地址为：' + obj.url);
      console.log('页面为:' + getCurrentPages()[getCurrentPages().length - 1].route);
    }
  }
  if (obj.isShowLoading !== false) {
    obj.isShowLoading = true;
  }
  if (obj.isShowLoading) {
    wx.showLoading({
      title: '加载中..',
    });
  };
  wx.request({
    url: baseAPI + obj.url,
    method: 'POST',
    header: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;' // 默认值
    },
    data: data,
    success: (res) => {
 50       if (res.data.code == -2) {
        let nowWebview = getCurrentPages()[getCurrentPages().length - 1];
        let nowWebviewUrl = nowWebview.route;
        let nowWebviewOptions = nowWebview.options;
        let fullUrl = nowWebviewUrl + '?';
        for (const key in nowWebviewOptions) {
          if (nowWebviewOptions.hasOwnProperty(key)) {
            fullUrl = fullUrl + key + '=' + nowWebviewOptions[key] + '&';
          }
        };
        fullUrl = '/' + fullUrl.substring(0, fullUrl.length - 1);
        wx.setStorageSync('beforeLoginPage', fullUrl);
      } else if (res.data.code == -9) {
        wx.showModal({
          title: '提示',
          content: '服务器繁忙，请稍后再试',
          showCancel: false
        })
      }else {
        if (typeof obj.success == 'function') { obj.success(res.data); }
      }
    },
    fail: (res) => {
      if (typeof obj.error == 'function') { obj.error(res.data); }
    },
    complete: (res) => {
      if (obj.isShowLoading) {
        wx.hideLoading();
      };
      if (typeof obj.complete == 'function') { obj.complete(res.data); }
    }
  })
};

上传图片的封装

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

const imgUpload = obj => {
  let imgUrl = obj.imgUrl;

  let url = baseAPI + "doFileUpload?token=123456";
  wx.uploadFile({
    url: url,
    filePath: imgUrl,
    name: 'file',
    success: function (res) {
      if (typeof obj.success == 'function') { obj.success(res); }
    },
    complete: function (res) {
      console.log(res);
    }
  })
}

暴露接口

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

//暴露模块接口
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)=>{
        
      }
    })
  },
})