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


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


寫擼一個(gè)名字叫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溪食。
大家使用的時(shí)候,注意這點(diǎn)娜扇,反正我被坑了很久错沃。坐等你入坑

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

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

3.get請求

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

4 .post請求

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

}

5.request請求方法


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

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('響應(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

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

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

}

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

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

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('響應(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ù)需求處理請求參數(shù):添加固定參數(shù)配置等
 * @params 請求參數(shù)
 */
function dealParams(params) {
  console.log("請求參數(shù):", params)
  return params;
}


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

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

使用:

1.在需要js的頁面雀瓢,引入httputils.js

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

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)容合作請聯(lián)系作者
  • 序言:七十年代末枢析,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子刃麸,更是在濱河造成了極大的恐慌醒叁,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異把沼,居然都是意外死亡啊易,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進(jìn)店門饮睬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來租谈,“玉大人,你說我怎么就攤上這事续捂。” “怎么了宦搬?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵牙瓢,是天一觀的道長。 經(jīng)常有香客問我间校,道長矾克,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任憔足,我火速辦了婚禮胁附,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘滓彰。我一直安慰自己控妻,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布揭绑。 她就那樣靜靜地躺著弓候,像睡著了一般。 火紅的嫁衣襯著肌膚如雪他匪。 梳的紋絲不亂的頭發(fā)上菇存,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天,我揣著相機(jī)與錄音邦蜜,去河邊找鬼依鸥。 笑死,一個(gè)胖子當(dāng)著我的面吹牛悼沈,可吹牛的內(nèi)容都是我干的贱迟。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼絮供,長吁一口氣:“原來是場噩夢啊……” “哼关筒!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起杯缺,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤蒸播,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體袍榆,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡胀屿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了包雀。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片宿崭。...
    茶點(diǎn)故事閱讀 38,599評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖才写,靈堂內(nèi)的尸體忽然破棺而出葡兑,到底是詐尸還是另有隱情,我是刑警寧澤赞草,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布讹堤,位于F島的核電站,受9級特大地震影響厨疙,放射性物質(zhì)發(fā)生泄漏洲守。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一沾凄、第九天 我趴在偏房一處隱蔽的房頂上張望梗醇。 院中可真熱鬧,春花似錦撒蟀、人聲如沸叙谨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽唉俗。三九已至,卻和暖如春配椭,著一層夾襖步出監(jiān)牢的瞬間虫溜,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工股缸, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留衡楞,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓敦姻,卻偏偏與公主長得像瘾境,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子镰惦,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容