美文网首页Thinkphp
微信小程序网络请求封装

微信小程序网络请求封装

作者: Android砖家 | 来源:发表于2019-03-17 11:52 被阅读0次

    话不多说,微信已经提供了网络请求的API,在实际项目开发中,为了好使,一般都会做网络请求封装啥的。


    写撸一个名字叫httputils.js

    1.请求头少不了

    /**
     * 请求头
     */
    var header = {
      'content-type': 'application/x-www-form-urlencoded',
      'Authorization': "Bearer " + wx.getStorageSync("token"),
      'os': 'android',
      'version': '1.0.0',
    }
    
    

    值得注意的是content-type': 'application/json,死活不行,必须content-type': 'application/x-www-form-urlencoded
    大家使用的时候,注意这点,反正我被坑了很久。坐等你入坑

    2.请求参数少不了

    /**
     * function: 根据需求处理请求参数:添加固定参数配置等
     * @params 请求参数
     */
    function dealParams(params) {
      console.log("请求参数:", params)
      return params;
    }
    
    

    3.get请求

    function get(url, params, onSuccess, onFailed) {
      console.log("请求方式:", "GET")
      request(url, params, "GET", onSuccess, onFailed);
    }
    
    

    4 .post请求

    /**
     * 供外部post请求调用  
     */
    function post(url, params, onSuccess, onFailed) {
      console.log("请求方式:", "POST")
      request(url, params, "POST", onSuccess, onFailed);
    
    }
    

    5.request请求方法

    
    /**
     * function: 封装网络请求
     * @url URL地址
     * @params 请求参数
     * @method 请求方式:GET/POST
     * @onSuccess 成功回调
     * @onFailed  失败回调
     */
    
    function request(url, params, method, onSuccess, onFailed) {
      console.log('请求url:' + url);
      wx.showLoading({
        title: "正在加载中...",
      })
      console.log("请求头:", header)
      wx.request({
        url: url,
        data: dealParams(params),
        method: method,
        header: header,
        success: function(res) {
          wx.hideLoading();
          console.log('响应:', res.data);
    
          if (res.data) {
            /** start 根据需求 接口的返回状态码进行处理 */
            if (res.statusCode == 200) {
              onSuccess(res.data); //request success
            } else {
              onFailed(res.data.message); //request failed
            }
            /** end 处理结束*/
          }
        },
        fail: function(error) {
          onFailed(""); //failure for other reasons
        }
      })
    }
    
    

    最终的httputils.js

    /**
     * 请求头
     */
    var header = {
      'content-type': 'application/x-www-form-urlencoded',
      'Authorization': "Bearer " + wx.getStorageSync("token"),
      'os': 'android',
      'version': '1.0.0',
      'device_token': 'ebc9f523e570ef14',
    }
    
    /**
     * 供外部post请求调用  
     */
    function post(url, params, onSuccess, onFailed) {
      console.log("请求方式:", "POST")
      request(url, params, "POST", onSuccess, onFailed);
    
    }
    
    /**
     * 供外部get请求调用
     */
    function get(url, params, onSuccess, onFailed) {
      console.log("请求方式:", "GET")
      request(url, params, "GET", onSuccess, onFailed);
    }
    
    /**
     * function: 封装网络请求
     * @url URL地址
     * @params 请求参数
     * @method 请求方式:GET/POST
     * @onSuccess 成功回调
     * @onFailed  失败回调
     */
    
    function request(url, params, method, onSuccess, onFailed) {
      console.log('请求url:' + url);
      wx.showLoading({
        title: "正在加载中...",
      })
      console.log("请求头:", header)
      wx.request({
        url: url,
        data: dealParams(params),
        method: method,
        header: header,
        success: function(res) {
          wx.hideLoading();
          console.log('响应:', res.data);
    
          if (res.data) {
            /** start 根据需求 接口的返回状态码进行处理 */
            if (res.statusCode == 200) {
              onSuccess(res.data); //request success
            } else {
              onFailed(res.data.message); //request failed
            }
            /** end 处理结束*/
          }
        },
        fail: function(error) {
          onFailed(""); //failure for other reasons
        }
      })
    }
    
    /**
     * function: 根据需求处理请求参数:添加固定参数配置等
     * @params 请求参数
     */
    function dealParams(params) {
      console.log("请求参数:", params)
      return params;
    }
    
    
    // 1.通过module.exports方式提供给外部调用
    module.exports = {
      postRequest: post,
      getRequest: get,
    }
    
    

    写好httputils.js后,一定要通过module.exports给外部使用

    使用:

    1.在需要js的页面,引入httputils.js

    var http = require('../../httputils.js');   //相对路径
    

    2.调用

    
    var prams = {
            username: "1111",
            password:"123456"
          }
    http.postRequest("https://www.baidu.com", prams,
            function(res) {
             
            },
            function(err) {
             
            })
    

    效果图


    WX20190317-115200@2x.png

    相关文章

      网友评论

        本文标题:微信小程序网络请求封装

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