微信小程式開發中的Post請求詳解

本篇文章講述了小程式開發中的Post請求，大家對小程式開發中的Post請求不瞭解的話或者對小程式開發中的Post請求感興趣的話那麼我們就一起來看看本篇文章吧， 好了廢話少說進入正題吧！

1.post請求

wx.request(OBJECT)
wx.request
發起的是 HTTPS 請求。一個小程式，同時只能有5個網路請求串連。
官網上描述

參數名	類型	必填	說明
url	String	是	開發人員伺服器介面地址
data	Object、String	否	請求的參數
header	Object	否	佈建要求的 header , header 中不能設定 Referer
method	String	否	預設為 GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
success	Function	否	收到開發人員服務成功返回的回呼函數，res = {data: '開發人員伺服器返回的內容'}
fail	Function	否	介面調用失敗的回呼函數
complete	Function	否	介面調用結束的回呼函數（調用成功、失敗都會執行）

小程式樣本

wx.request({  url: 'test.php', //僅為樣本，並非真實的介面地址  data: {        x: '' ,         y: ''   },   header: {     'content-type': 'application/json'   },   success: function(res) {     console.log(res.data)   }})

這種請求GET方式是ok的，header頭也可以不用添加。
但是POST就有比較大的問題了。

我使用以下代碼進行調試（代碼一）：

wx.request({    url: ApiHost + '/?service=default.getOrderInfo',    data: {      'order_id': order_id    },    method: 'POST',    success: function (res) {      // console.log(res);      if (res.data.ret == 200) {       //something to do      }      else{       //something to do      }    }    fail: function (res) {      console.log(res);    }  });

注意看，開發工具裡面的提示：

POST 請求會將data的值放在Request Payload裡面，而不是Query String Parameters裡面，後端伺服器如果不注意，就無法取到資料。
網上很多改法，是這樣的。----加上header頭

wx.request({    url: ApiHost + '/?service=default.getOrderInfo',    data: {      //資料urlencode方式編碼，變數間用&串連，再post      'order_id='+order_id    },    method: 'POST',    header：{      'content-type':'application/x-www-form-urlencoded'    },    success: function (res) {      // console.log(res);      if (res.data.ret == 200) {       //something to do      }      else{       //something to do      }    }    fail: function (res) {      console.log(res);    }  });

這樣修改的話，後端可以不用特別處理。
但是............

因為還是想用標準的方法做，那隻有修改後端伺服器啦。
我這邊使用的是Phalapi架構，推薦下~~~

if(DI()->request->getHeader('content-type')){      $contentType = DI()->request->getHeader('content-type');}if(!empty($contentType)&&(strtolower(@$contentType) === 'application/json')){    $HTTP_RAW_POST_DATA = isset($GLOBALS['HTTP_RAW_POST_DATA']) ? $GLOBALS['HTTP_RAW_POST_DATA'] : "{}";    DI()->request = new PhalApi_Request(array_merge($_GET,json_decode($HTTP_RAW_POST_DATA, true)));}

終於，在pc上用代碼一調試通過。用上標準請求，也不用application/x-www-form-urlencoded這種模式。

不過.....用上真機調試，怎麼又接收不到請求參數了。怪事。。。。。。。。。
最後通過抓包分析

真機端

POST /?service=default.getOrderInfo HTTP/1.0Host: proxyConnection: closeContent-Length: 43Content-Type: application/jsonAccept-Encoding: gzip, deflateAccept: */*User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 9_3_5 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Mobile/13G36 MicroMessenger/6.5.1 NetType/WIFI Language/zh_CNReferer: https://servicewechat.com/###/0/page-frame.htmlAccept-Language: zh-cn{"order_id":"011T00wO0gZVR72P89tO0DFNvO0T00w0"}

pc類比開發端

POST /?service=default.getOrderInfo HTTP/1.0Host: proxyConnection: closeContent-Length: 43Origin: http://###.appservice.open.weixin.qq.comX-Requested-With: XMLHttpRequestUser-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36 appservice webview/100000content-type: application/jsonAccept: */*Referer: https://servicewechat.com/####/devtools/page-frame.htmlAccept-Encoding: gzip, deflate, br{"order_id":"011T00wO0gZVR72P89tO0DFNvO0T00w0"}

最後找到區別：
Content-Type 與 content-type
模擬器預設是content-type
真機預設是Content-Type
後端伺服器增加處理Content-Type 就搞定了。