微信小程序网络请求封装

工欲善其事，必先利其器。古人总结的经验在今天看来仍旧是充满着智慧。

最近接手了公司的小程序开发，原先是八流的安卓开发，刚开始被小程序的什么cs、js看的头晕目眩，好在还有那么一点点基础才不至于被完全挫败。从0到1终于有了进展，但是在某个时刻又觉得从1变回了0，不会写到会写的这个过程克服了，又遇到了第二个问题，会写就完了吗，仅仅只停留在会写这个层面就可以了吗，在会写之后渐渐的不满足了，首先看到那一个个  wx.request({}）就觉得有点恶心了，每一次请求接口都要写一大堆，一个页面好多个接口，那就是好多个一大堆，恶不恶心啊，有点受不了了，所以才有了网络请求封装的想法。当然，我只是一个初学者，可能在大佬看来这只是很简单的一个操作，有什么价值去值得你写blog，没办法啊，我就是个小菜鸡而且心态还好，我只是单纯的想记录下自己走过的路，仅此而已。

废话不多说了，开干咯

1、在utils文件夹下新建api.js文件用来保存自己的请求地址和接口路径，新学小程序的同学如果不知道怎么在utils文件夹下新建js文件就自行百度下

 

//测试地址
const ApiRootUrl = 'http://ip地址:端口';

module.exports = {

  请求路径1: ApiRootUrl + '接口路径', //1、完整的请求地址
  请求路径1: ApiRootUrl + '接口路径', //1、完整的请求地址
  请求路径1: ApiRootUrl + '接口路径', //1、完整的请求地址
  请求路径1: ApiRootUrl + '接口路径', //1、完整的请求地址

};

2、网络请求封装--》在util.js文件中，get、post方法

 

/**封装网络请求 */

/**
 * 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/x-www-form-urlencoded;charset=UTF-8'
  return new Promise(function (resolve, reject) {
    wx.request({
      url: url,
      data: data,
      method: method,
      header: {
        'Content-Type': contentType,
      },
      success: function (res) {
        console.log('===============================================================================================')
        console.log('==    接口地址：' + url)
        console.log('==    接口参数：' + JSON.stringify(data))
        console.log('==    请求类型：' + method)
        console.log("==    接口状态：" + res.statusCode);
        console.log("返回数据" + JSON.stringify(res))
        console.log('===============================================================================================')
//然后就可以开始你相对应的操作啦

        if (res.statusCode == 200) {
              resolve(res.data);
        } else {
          //请求失败
          reject("请求失败：" + res.statusCode)
        }
      },
      fail: function (err) {
        //服务器连接异常
        console.log('===============================================================================================')
        console.log('==    接口地址：' + url)
        console.log('==    接口参数：' + JSON.stringify(data))
        console.log('==    请求类型：' + method)
        console.log("==    服务器连接异常")
        console.log('===============================================================================================')
        reject("服务器连接异常，请检查网络再试")
      }
    })
  });
}

//暴露方法
module.exports = {
  formatTime,
  request,
  get,
  post
}

3、使用

//js引入
const util = require('../../utils/util.js')
const api = require('../../utils/api.js')


 /**
     * get、post方法中有两个参数
     * get、post以指明用哪种方式请求
     * url：请求路径    eg:api.请求路径1
     * data：请求参数   eg:data{}
     */

let data = {
          参数1: xxxx,
          参数2：xxxx
        }

 util.get(url, data).then((res) => {
        console.log("打印信息"+res.data)
    }).catch((errMsg) => {
      //错误提示信息
      wx.showToast({
          title: errMsg,
          icon: "none"
        })
    });

完工，小菜鸡的网络请求哔哔完了，如果你和我一样是个新手，那就别怕别放弃，没有谁是天生下来就什么都会的，自己加油加油加油！！！