微信小程序请求封装（http请求详解）

如果你做过Angular或者Vue的话，你会发现，微信小程序跟他们有很多相似的地方，相比来说，小程序要简单一些。http请求的封装也是一样，废话不多说 ，直接上步骤。

1、创建一个http.js,代码如下：

let rootUrl = "http://www.baidu.com";//具体接口域名根据你的实际情况填写
function getData(url,data,cb){
    wx.request({
        url : rootUrl + url,
        data: data,
        method: 'post',
        header: {
          // "Content-Type": "json",   //get请求时候
          "Content-Type": "application/x-www-form-urlencoded" //POST请求的时候这样写
        },  
        success: function(res){  
            return typeof cb == "function" && cb(res.data)  
        },  
        fail: function(){  
            return typeof cb == "function" && cb(false)  
        }  
    })
}
module.exports = {
    req : getData //暴露一个方法
}

这段代码有个坑：就是那个请求头header，如果是get请求

header{
  "Content-Type": "json"
}

如果是post请求

header{
  "Content-Type": "application/x-www-form-urlencoded" //POST请求的时候这样写
}

2、在小程序app.js里配置全局函数

var http = require('http/http.js')  //引入刚创建的http.js,地址根据自己的地址填写
App({
  onLaunch: function() {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo: function(cb) {
    var that = this
    if (this.globalData.userInfo) {
      typeof cb == "function" && cb(this.globalData.userInfo)
    } else {
      //调用登录接口
      wx.getUserInfo({
        withCredentials: false,
        success: function(res) {
          that.globalData.userInfo = res.userInfo
          typeof cb == "function" && cb(that.globalData.userInfo)
        }
      })
    }
  },
  globalData: {
    userInfo: null
  },
  func:{
    req:http.req  //这里配置我们需要的方法
  }
})

3、在项目代码中调用方法

var app = getApp() ;
Page({
  data: {
    title:"111111"
  },
  //事件处理函数
  changeMenus: function(){
      let postdata = {
         userId:12
      }
      app.func.req('/abner/web/getUserByOpenId',postdata,(res)=>{  
           console.log(res)
      }
    })
  }
})