小程序通用网络请求+API封装

概述
之前一直是android开发，最近准备入手一下小程序。而网络请求+API封装我发现不管哪种语言工程都是需要的。我提供一下通用的小程序网络请求和API封装

第一步

在Page文件夹中新建一个utils包名
在utils包名下新建一个叫做httprequest.js文件
分部解释一下httprequest.js内容
网络请求头，必备的。

/**
 * 请求头
 */
var header = {
  'content-type': 'application/json',
  'Authorization': "Bearer " + wx.getStorageSync("token"),
  'os': 'android',
  'version': '1.0.0',
}

get请求

function get(url, params, onSuccess, onFailed) {
  console.log("请求方式：", "GET")
  request(url, params, "GET", onSuccess, onFailed);
}

post请求

function post(url, params, onSuccess, onFailed) {
  console.log("请求方式：", "POST")
  request(url, params, "POST", onSuccess, onFailed);
}

请求方式有： OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
上述举例get/post请求。有其他需要的可按实例自己添加

网络请求
url:URL请求地址
params：请求参数
method：请求方式（请求方式上述以写多种方式）
onSuccess：请求成功回调
onFailed:请求失败回调

function request(url, params, method, onSuccess, onFailed) {
  wx.showLoading({
    title: "正在加载中...",
  })
  wx.request({
    url: url,
    data: dealParams(params),
    method: method,
    header: header,
    success: function (res) {
      wx.hideLoading();
      if (res.data) {
        if (res.statusCode == 200) {
          onSuccess(res.data);
        } else {
          onFailed(res.data.message); 
        }
      }
    },
    fail: function (error) {
      onFailed(""); 
    }
  })
}

这块代码值得注意，相当于把该文件内容方式抛出给其他类调用。必写~~~~

module.exports = {
  postRequest: post,
  getRequest: get,
}

httprequest.js完整代码如下：

/**
 * 请求头
 */
var header = {
  'content-type': 'application/json',
  'Authorization': "Bearer " + wx.getStorageSync("token"),
  'os': 'android',
  'version': '1.0.0',
}
function get(url, params, onSuccess, onFailed) {
  request(url, params, "GET", onSuccess, onFailed);
}
function post(url, params, onSuccess, onFailed) {
  console.log("请求方式：", "POST")
  request(url, params, "POST", onSuccess, onFailed);

}


function request(url, params, method, onSuccess, onFailed) {
  wx.showLoading({
    title: "正在加载中...",
  })
  wx.request({
    url: url,
    data: dealParams(params),
    method: method,
    header: header,
    success: function (res) {
      wx.hideLoading();
      if (res.data) {
        if (res.statusCode == 200) {
          onSuccess(res.data); 
        } else {
          onFailed(res.data.message); 
        }
      }
    },
    fail: function (error) {
      onFailed("");
    }
  })
}
// 1.通过module.exports方式提供给外部调用
module.exports = {
  postRequest: post,
  getRequest: get,
}

以上就是简单的小程序网络请求封装。
接下来是API封装。当然我也不知道这样写到底如何，新手可查看，大佬勿嘲笑

在utils文件夹中新建api.js
esUrl 来区分是正式环境还是测试环境

var esUrl = 1;  
if(esUrl == 1){
  var url_image = '测试环境'   //加载图片
  var url_main = '测试环境'    //主接口
  var url_web = '测试环境'     //h5
}
if(esUrl == 2){
  var url_image = '正式环境'
  var url_main = '正式环境'
  var url_web = '正式环境'
}

登录api

//账号密码登录
var getLoginType = 'XXXXXXXXXXXXXXXXXXXXXX'   //api     eg:test/login/logintype

接下来只要把他抛出可让外部调用就行

module.exports = {
  url_image: url_image,
  url_main: url_main,
  url_web: url_web,
  getLoginType: getLoginType
}

完整api.js代码

var esUrl = 2;  //改变网络环境，1 内网   2公网
if(esUrl == 1){
  var url_image = 'XXXXXXXXXXXXXXXXXXXXX'
  var url_main = 'XXXXXXXXXXXXXXXXXXXXX'
  var url_web = 'XXXXXXXXXXXXXXXXXXXXX'
}
if(changeUrl == 2){
  var url_image = 'XXXXXXXXXXXXXXXXXXXXX'
  var url_main = 'XXXXXXXXXXXXXXXXXXXXX'
  var url_web = 'XXXXXXXXXXXXXXXXXXXXX'
}

//账号密码登录
var getLoginType = 'XXXXXXXXXXXXXXXXXXXXX'

module.exports = {
  url_image: url_image,
  url_main: url_main,
  url_web: url_web,
  getLoginType: getLoginType
}

如何调用呢？
前往你需要条用的index.js中

第一步：
获取应用实例

var http = require('../utils/httprequest.js');
var appUrl = require('../utils/api.js');

第二步：
调用请求方法

	 var prams = {
      userName:"XXXXX",
      passWord:"XXXXX",
    }
    let _this = this;
    http.postRequest(appUrl.url_main+appUrl.getLoginType, prams,
      function(res){
        
        _this.setData({
          
        })
      },
      function(err){
      }
    )

var prams 为请求参数
http.postRequest这个方法正是httprequest.js抛出来的方法
appUrl.url_main+appUrl.getLoginType 为URL请求地址
funcation(res) res为请求内容
funcation(err) err请求失败
注：一定要写let _this=this 小程序中的setData方法是赋值方法，但是在funcation(res)中this已经非全局this，故在请求之前先声明一个_this为主体this

好了。就写到这吧