微信小程序網(wǎng)絡(luò)請(qǐng)求封裝


話不多說(shuō),微信已經(jīng)提供了網(wǎng)絡(luò)請(qǐng)求的API,在實(shí)際項(xiàng)目開(kāi)發(fā)中,為了好使,一般都會(huì)做網(wǎng)絡(luò)請(qǐng)求封裝啥的。


寫擼一個(gè)名字叫httputils.js

1.請(qǐng)求頭少不了

/**
 * 請(qǐng)求頭
 */
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。
大家使用的時(shí)候,注意這點(diǎn),反正我被坑了很久。坐等你入坑

2.請(qǐng)求參數(shù)少不了

/**
 * function: 根據(jù)需求處理請(qǐng)求參數(shù):添加固定參數(shù)配置等
 * @params 請(qǐng)求參數(shù)
 */
function dealParams(params) {
  console.log("請(qǐng)求參數(shù):", params)
  return params;
}

3.get請(qǐng)求

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

4 .post請(qǐng)求

/**
 * 供外部post請(qǐng)求調(diào)用  
 */
function post(url, params, onSuccess, onFailed) {
  console.log("請(qǐng)求方式:", "POST")
  request(url, params, "POST", onSuccess, onFailed);

}

5.request請(qǐng)求方法


/**
 * function: 封裝網(wǎng)絡(luò)請(qǐng)求
 * @url URL地址
 * @params 請(qǐng)求參數(shù)
 * @method 請(qǐng)求方式:GET/POST
 * @onSuccess 成功回調(diào)
 * @onFailed  失敗回調(diào)
 */

function request(url, params, method, onSuccess, onFailed) {
  console.log('請(qǐng)求url:' + url);
  wx.showLoading({
    title: "正在加載中...",
  })
  console.log("請(qǐng)求頭:", header)
  wx.request({
    url: url,
    data: dealParams(params),
    method: method,
    header: header,
    success: function(res) {
      wx.hideLoading();
      console.log('響應(yīng):', res.data);

      if (res.data) {
        /** start 根據(jù)需求 接口的返回狀態(tài)碼進(jìn)行處理 */
        if (res.statusCode == 200) {
          onSuccess(res.data); //request success
        } else {
          onFailed(res.data.message); //request failed
        }
        /** end 處理結(jié)束*/
      }
    },
    fail: function(error) {
      onFailed(""); //failure for other reasons
    }
  })
}

最終的httputils.js

/**
 * 請(qǐng)求頭
 */
var header = {
  'content-type': 'application/x-www-form-urlencoded',
  'Authorization': "Bearer " + wx.getStorageSync("token"),
  'os': 'android',
  'version': '1.0.0',
  'device_token': 'ebc9f523e570ef14',
}

/**
 * 供外部post請(qǐng)求調(diào)用  
 */
function post(url, params, onSuccess, onFailed) {
  console.log("請(qǐng)求方式:", "POST")
  request(url, params, "POST", onSuccess, onFailed);

}

/**
 * 供外部get請(qǐng)求調(diào)用
 */
function get(url, params, onSuccess, onFailed) {
  console.log("請(qǐng)求方式:", "GET")
  request(url, params, "GET", onSuccess, onFailed);
}

/**
 * function: 封裝網(wǎng)絡(luò)請(qǐng)求
 * @url URL地址
 * @params 請(qǐng)求參數(shù)
 * @method 請(qǐng)求方式:GET/POST
 * @onSuccess 成功回調(diào)
 * @onFailed  失敗回調(diào)
 */

function request(url, params, method, onSuccess, onFailed) {
  console.log('請(qǐng)求url:' + url);
  wx.showLoading({
    title: "正在加載中...",
  })
  console.log("請(qǐng)求頭:", header)
  wx.request({
    url: url,
    data: dealParams(params),
    method: method,
    header: header,
    success: function(res) {
      wx.hideLoading();
      console.log('響應(yīng):', res.data);

      if (res.data) {
        /** start 根據(jù)需求 接口的返回狀態(tài)碼進(jìn)行處理 */
        if (res.statusCode == 200) {
          onSuccess(res.data); //request success
        } else {
          onFailed(res.data.message); //request failed
        }
        /** end 處理結(jié)束*/
      }
    },
    fail: function(error) {
      onFailed(""); //failure for other reasons
    }
  })
}

/**
 * function: 根據(jù)需求處理請(qǐng)求參數(shù):添加固定參數(shù)配置等
 * @params 請(qǐng)求參數(shù)
 */
function dealParams(params) {
  console.log("請(qǐng)求參數(shù):", params)
  return params;
}


// 1.通過(guò)module.exports方式提供給外部調(diào)用
module.exports = {
  postRequest: post,
  getRequest: get,
}

寫好httputils.js后,一定要通過(guò)module.exports給外部使用

使用:

1.在需要js的頁(yè)面,引入httputils.js

var http = require('../../httputils.js');   //相對(duì)路徑

2.調(diào)用


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

效果圖


WX20190317-115200@2x.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容