(六)小程序封装原生请求

(六)小程序封装原生请求

使用原生的XmlHttpRequest

首先封装的要求就是,把相应的请求API地址,单独列出来,然后封装请求的格式及相应的拦截请求

1.新建config文件夹,存放接口

在公共目录下面新建config文件夹,新建api.js 放接口,

//测试地址
const {get, post, addToken, delToken} from;

const BaseUrl = 'http://127.0.1.1/api/';

module.exports = {
  indexBanner: BaseUrl + 'Banner/List', //获取Banner图列表
  indexUrl: BaseUrl + 'News/GetNewsListByPageType', //获取链接的接口
};

封装使用的接口请求(get.post)

在utils文件下的utils.js中

/**
 * GET请求封装
 */
function get(url, data = {}) {
  return request(url, data, 'GET')
}

/**
 * POST请求封装
 */
function post(url, data = {}) {
  return request(url, data, 'POST')
}

/**
 * 微信的request
 */
function request(url, data = {}, method = "GET") {
  var contentType = 'application/json'
  return new Promise(function(resolve, reject) {
    wx.request({
      url: url,
      data: data,
      method: method,
      header: {
        'Content-Type': contentType,
        'Authorization': 'Bearer ' + getDataByKey('token')
      },
      success: function(res) {
        if (res.statusCode == 200) {
          //请求正常200
          resolve(res.data);
        } else if (res.statusCode == 401) {
          //此处验证了token的登录失效，如果不需要，可以去掉。
          //未登录，跳转登录界面
          reject("登录已过期")
          wx.showModal({
            title: '提示',
            content: '登录已过期，请立即登录，否则无法正常使用',
            success(res) {
              if (res.confirm) {
                console.log('用户点击确定')
                wx.navigateTo({
                  url: '/pages/login/login?toPageUrl=401',
                })
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })
        } else {
          //请求失败
          reject("请求失败：" + res.statusCode)
        }
      },
      fail: function(err) {
        //服务器连接异常
        reject("服务器连接异常，请检查网络再试")
      }
    })
  });
}

module.exports = {
  formatTime,
  request,
  get,
  post,
}

然后在使用的时候 就是直接在页面里面进行调用就可以了 把写好的地址 放进去
但是这样写不对的
是要直接在地址的位置直接把请求写好 然后直接调用地址 返回相应的数据
但是在地址页面里面 需要启用ES6的 import 才可以进行引入 我没有进行尝试过 所以没有写
等我后边写的时候 再回来写好这个博客
而且 我建议能用框架就用框架吧 例如相应的分包加载 独立包加载 因为今天发现这玩意被反编译的可能性很大 接口要是不加密 就直接就能看到相应的穿的参数 所有的 一方面是要进行加密 一方面对打包要求要高一些 据说分包加载被反编译的可能性比较低
真是他妈的愁人 这玩意 真是初级入门都没有搞明白 框架的底层都没有深入进去 接着就要考虑加密的问题了 真是尴尬 想骂人
还有就是这东西真的是 有些人人家天生就有天赋 有的人学会都难得要死 真是人比人得死 艹
你说说
上哪说理去
还是受情绪的影响太大了 把这些事情看的太重了 真的是 一有点事情 就些许的失落