微信小程序使用es6封装http请求

公司前段时间研究跨端融合，发现有一款框架名叫hera，可以将微信小程序直接编译为native应用，没错，就是apk的那种安装包……

遂开始了研究……

因为之前有过vue的编码经验，而小程序又是mvvm的数据驱动型框架，上手相对还是比较快的。

此乃前言。

打开看了下官方文档，微信自带的http请求已经很简洁了，传入相应的参数和地址，还有回调，便能方便的完成请求。不过我本人不是很喜欢回调，再加上token等验证请求需要特定处理，便打算自己动手封装，操作实践一下。

说一下思路，创建Request类，类内声明相关属性与操作，例如get请求就是request类下的一个方法，在app.js引用后挂载到全局，即可方便优雅的调用。（ps：当初考虑到将请求方法当作参数传递，例如post，put，delete这些，这样Request就只用实现一个方法，但是会使参数列表太冗长，而且封装的方法对请求body和参数的处理有些繁琐，就分开写了，读者也可以自行实践）以下是代码实现。

在app.js下同级创建文件，命名为util.js，用以声明request

import {
  INTERFACE
} from "./namespace.js"


class Request {
  constructor() {
    this.url = INTERFACE;
  }
  // params接受传入参数为对象/字符串，对象会以参数列表拼在url后，字符串则接在url之后
  GET(url, params) {
    var _params = ''
    if (typeof params == 'object') {
      let index = 0;
      for (var key in params) {
        _params += (index === 0 ? '?' : '&') + key + '=' + params[key];
        index++;
      }
    } else if (typeof params == 'string') {
      _params += params;
    } else {
      _params = ''
    }
    return new Promise((resolve, reject) => {
      wx.request({
        url: this.url['path'] + this.url[url] + _params,
        method: 'GET',
        header: {
          'Content-Type': 'application/json',
          'token': wx.getStorageSync('token')
        },
        success: res => {
          if (res.statusCode == 200 && res.data.code == 0) {
            resolve(res.data);
          } else {
            reject(res.data)
          }
        },
        fail: res => {
          reject(res.data)
        }
      })
    });
  }
  // post请求接受参数为json对象，作为请求体传递给后台，需要与后台小伙伴商议好传输方式
  POST(url, params) {
    return new Promise((resolve, reject) => {
      // console.log(url)
      wx.request({
        url: this.url['path'] + this.url[url],
        data: params,
        method: 'POST',
        header: {
          'content-Type': 'application/json',
          'token': wx.getStorageSync('token')
        },
        success: res => {
          resolve(res.data);
        },
        fail: res => {
          reject(res.data)
        }
      })
    });
  }
}


module.exports = {
  Request
}

创建namespace，内存储接口地址。

var app = getApp()
const INTERFACE = {
  path: '基地址',
  login: 'login,
}
export {
  INTERFACE
}

在app.js引用util，挂载在全局app上

//app.js
import util from "./util.js"
App(
  util: util
})

在页面文件内使用

    var r = new app.util.Request();
    r.POST('login')
      .then((res) => {
        console.log(res);
      })
      .catch((error) => {
        console.error(error)
      })

有问题可以在留言区咨询