微信小程式如何請求資料,如何配置伺服器
http請求介紹
HTTP(HyperText Transfer Protocol)是一套計算機通過網路進行通訊的規則。計算機專家設計出HTTP,使HTTP客戶(如Web瀏覽器)能夠從HTTP伺服器(Web伺服器)請求資訊和服務,HTTP目前協議的版本是1.1.HTTP是一種無狀態的協議,無狀態是指Web瀏覽器和Web伺服器之間不需要建立持久的連線,這意味著當一個客戶端向伺服器端發出請求,然後Web伺服器返回響應(response),連線就被關閉了,在伺服器端不保留連線的有關資訊.HTTP遵循請求(Request)/應答(Response)模型。Web瀏覽器向Web伺服器傳送請求,Web伺服器處理請求並返回適當的應答。所有HTTP連線都被構造成一套請求和應答。
微信小程式設定http請求
在微信小程式進行網路通訊,只能和指定的域名進行通訊,微信小程式包括四種類型的網路請求。
1、普通HTTPS請求(wx.request
)
2、上傳檔案(wx.uploadFile
)
3、下載檔案(wx.downloadFile
)
4、WebSocket通訊(wx.connectSocket
)
這裡以介紹wx.request
,wx.uploadFile
,wx.dowloadFile
三種網路請求為主
設定域名
要微信小程式進行網路通訊,必須先設定域名,不然會出現錯誤:
URL 域名不合法,請在 mp 後臺配置後重試
需要在微信公眾平臺的小程式中設定域名。
在微信小程式的設定介面可以看到設定選項:
設定
選擇開發設定:
開發設定
可以看到伺服器設定:
伺服器設定
在這裡可以設定對應四種網路訪問的域名,每一種型別的網路請求需要設定一個域名,注意如果在這裡設定域名為https://example.com/api/,那麼https://example.com/api是無法呼叫的,必須加上後面/。
http請求
使用wx.request
可以發起一個http請求,一個微信小程式被限制為同時只有5個網路請求。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function queryRequest(data){
wx.request({
url: "https://example.com/api/" ,
data:data,
header:{
// "Content-Type":"application/json"
},
success:function(res){
console. log (res.data)
},
fail:function(err){
console. log (err)
}
})
}
|
上面的程式碼會發送一個http get請求,然後打印出返回的結果。其中的引數也比較容易理解。
url
伺服器的url地址
data
請求的引數可以採用String
data:"xxx=xxx&xxx=xxx"
的形式或者Object
data:{"userId":1}
的形式
header
設定請求的header
success
介面成功的回撥
fail
介面失敗的回撥
另外還有兩個引數沒有在程式碼裡:
method
http
的方法,預設為GET請求
complete
呼叫介面結束之後的回撥,無論成功或者失敗該介面都會被呼叫
上傳檔案
上傳檔案的api為wx.uploadFile
,該api會發起一個http
post請求,其中的Content-type
為multipart/form-data
。伺服器端需要按照該Content-type
型別接收檔案,示例程式碼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function uploadFile(file,data) {
wx.uploadFile({
url: 'http://example.com/upload' ,
|