美文网首页
微信小程序请求封装(http请求详解)

微信小程序请求封装(http请求详解)

作者: _littleTank_ | 来源:发表于2017-11-03 16:19 被阅读0次

    如果你做过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)
          }
        })
      }
    })
    

    相关文章

      网友评论

          本文标题:微信小程序请求封装(http请求详解)

          本文链接:https://www.haomeiwen.com/subject/exbtmxtx.html