文章目錄

• • 網絡請求的相關設置
  • 發起網絡請求
  • 緩存

請注意：小程序只支持https和wss（WebSocket，其具備ws協議與wss協議）協議的網絡請求。但是允許開發者在開發環境下使用http請求，不過在最終上線時必須要修改為小程序支持的協議類型。

• 文檔地址：
• https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

網絡請求的相關設置

• 雖然小程序只支持https和wss協議的網絡請求。但是允許開發者在開發環境下使用http請求。如果需要在開發環境下使用http協議進行開發測試并且不對域名合法性進行校驗，請記得開啟支持：

• 最終上線時，需要有https的接口服務，并且需要在小程序官方后臺中設置接口域名（為了安全，添加域名白名單），設置路徑：小程序管理后臺 / 開發 / 開發設置 / 服務器域名。如果條件允許，建議盡量在開發時就使用符合要求的域名配置而不是等到上線的時候再返工。

如果使用的測試號，請在測試號管理頁面添加白名單。

• 域名可以使用給定測試域名：
• https://api.i-lynn.cn
• https://mpapi.iynn.cn

發起網絡請求

• 在小程序的wx對象中，其已經提供了網絡請求方法。

• 語法：wx.request(請求參數的對象)

• 文檔地址：

• https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

示例代碼：

wx.request({url: 'test.php', //僅為示例，并非真實的接口地址data: {x: '',y: ''},method: "GET",header: {'content-type': 'application/json' // 默認值},success (res) {console.log(res.data)} })

注：在發起請求之前，需要在app.json文件中設置request請求的超時時間以防止網絡堵塞導致程序卡死，時間單位為毫秒：

"networkTimeout": {"request": 10000 }

wx.request()的方法返回的對象信息包含如下幾個屬性：

• cookies：返回的cookies
• data：響應體
• header：響應頭
• statusCode：http狀態碼
• errMsg：錯誤信息

例如：點擊按鈕發送一個網絡請求請求數據并循環渲染

• wxml代碼

<!--pages/request/request.wxml--> <text>pages/request/request.wxml</text><button type="primary" bindtap="send">發送請求</button><block wx:for="{{data}}" wx:key="index"><view>地區id：{{item.id}}，地區名：{{item.name}}</view> </block>

• js代碼

Page({/*** 頁面的初始數據*/data: {data: []},/*** 發送網絡請求*/send() {wx.request({// 請求地址url: 'https://api.i-lynn.cn/area',// 請求方式method: "GET",// 請求參數data: {id: 1},// 成功請求的回調success: (res) => {console.log(res);this.setData({data: res.data})}})} })

緩存

• 文檔地址：

• https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorage.html

• 小程序是有緩存的，但是它緩存沒有過期時間，單個key允許存儲的最大數據長度為1MB，所有數據存儲上限為10MB。如果緩存達到了上限，清除緩存，清除緩存機制：最久未被使用。

• 重要的數據不要放在小程序緩存中。

需要注意：獲取緩存數據的方法wx.getStorage方法為異步方法，在獲取的時候要么加.then進行處理，要么加async + await進行處理。（推薦：再或者就是在方法名后面加上Sync來使用其同步的方法）在小程序開發工具中默認是不允許使用async和await的，如有使用需求，請開啟增強編譯功能，如圖：

例如：在wxml結構中設置2個按鈕，分別用于設置和獲取緩存的數據

<!-- 設置緩存 --> <button type="primary" bindtap="setCache">設置</button><!-- 獲取緩存 --> <button type="primary" bindtap="getCache">獲取</button>

隨后編寫事件處理程序：

// 同步設置緩存（對于已有的數據key可以覆蓋，修改） setCache: function () {wx.setStorageSync('classname', 'sz2101') },getCache: function () {console.log(wx.getStorageSync('classname')); },

總結

以上是生活随笔為你收集整理的小程序 网络请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。