調用wx.request接口時須要注意的幾個問題

寫在前面

以前寫了一篇《微信小程序實現各類特效實例》，上次的小程序的項目我負責大部分前端後臺接口的對接，而後學長幫我改了一些問題。總的來講，收穫了很多吧！

如今項目已經完成，仍是要陸陸續續總結一下的，總結的過程也是對知識梳理和清晰的過程！

此次主要聊一下小程序先後端接口對接的一些事，

 

對於客戶端與服務端接口的對接，微信小程序提供了wx.request()的API接口，完美的實現前端後臺的對接：

一個簡單的慄子：

 wx.request({
     url: API_URL + '/api/category/categoryList', data: { applet_id: app.globalData.applet_id }, method: 'POST', success: function (res) { wx.hideLoading(); console.log(res.data.data, 'category data acquisition success');

            that.setData({category: res.data.data});
       }
  });

 在控制檯中也獲得了我想要的接口中的數據：

 

但期間也遇到了幾個問題，總結下來；

1）網絡請求與域名的合法性

微信小程序包括四種類型的網絡請求：

• 普通HTTPS請求(wx.request)

• 上傳文件(wx.uploadFile)

• 下載文件(wx.downloadFile)

• WebSocket通訊(wx.connectSocket)

關於「URL 域名不合法，請在後臺配置後重試」的錯誤

小程序只容許與合法配置的域名進行數據交互

進入微信公共平臺=>設置=>開發設置：設置須要交互的域名

2）對於接口調用http和https的問題

對於這一個問題，在以前來講，微信公共平臺支持使用http測試項目，可是正式發佈須要使用https的域名，

可是前幾天看到了微信公衆平臺發的一則公告：

應該是要封殺http方式調用了，公告連接：爲保證數據傳輸安全，提升業務安全性，公衆平臺將再也不支持HTTP方式調用（時間2017年9月21日）

3）關於method以及data數據

微信小程序多地方都嚴格區分大小寫，因此要注意method的value須要爲大寫，request的默認的超時時間都是60s；

對於data數據，上次咱們從接口中拿到的數據是json格式的，最終發送給服務器的數據是String類型，若是傳入的 data 不是 String 類型，會被轉換成 String 。

文檔中提供的轉換規則以下：

• 對於 header['content-type'] 爲 application/json 的數據，會對數據進行 JSON 序列化

• 對於 header['content-type'] 爲 application/x-www-form-urlencoded 的數據，會將數據轉換成 query string；

（encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）

這個工做在咱們設置header頭爲application/x-www-form-urlencoded後，在後面爲咱們進行。

4）關於GET和POST請求

根據HTTP的規範，get是用於信息獲取，post表示可能修改服務器的資源的請求

對於小程序post請求：'application/json'用在get請求中沒有問題，可是用在POST請求中很差使了，content-type 默認爲 'application/json'; 

因此使用post請求時，將content-type設置爲 application/x-www-form-urlencoded 

寫在後面

總結了以上四個問題，應該是比較常見也是容易遇到的，歡迎補充和指正，另外文檔中api模塊還有一些須要注意的問題，

項目咱們在github已同步：StackOverflowChen；歡迎來訪喲；

 

參考資料

[1] https://mp.weixin.qq.com/debug/wxadoc/dev/api/

[2] http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html