微信小程式之網絡請求

概述

微信網絡請求api

小程式宿主環境要求request發起的網絡請求必須是https協定請求，是以開發者伺服器必須提供HTTPS服務的接口，同時為了保證小程式不亂用任意域名的服務，wx.request請求的域名需要在小程式管理平台進行配置，如果小程式正式版使用wx.request請求未配置的域名，在控制台會有相應的報錯。

最簡單的一個請求：

wx.request({
  url: 'test.php', //僅為示例，并非真實的接口位址
  
  success: function(res) {
    console.log(res.data)
  }
  
})
           

api彙總

參數名	類型	必填	預設值	說明
url	String	是	開發者伺服器接口位址
data	Object/String/ArrayBuffer	否	請求的參數
header	Object	否	設定請求的 header，header 中不能設定 Referer。
method	String	否	GET	（需大寫）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataType	String	否	json	如果設為json，會嘗試對傳回的資料做一次 JSON.parse
responseType	String	否	text	設定響應的資料類型。合法值：text、arraybuffer
success	Function	否	收到開發者服務成功傳回的回調函數
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

success傳回參數說明：

參數	類型	說明
data	Object/String/ArrayBuffer	開發者伺服器傳回的資料
statusCode	Number	開發者伺服器傳回的 HTTP 狀态碼
header	Object	開發者伺服器傳回的 HTTP Response Header

請求參數data資料說明：

最終發送給伺服器的資料是 String 類型，如果傳入的 data 不是 String 類型，會被轉換成 String 。轉換規則如下：

對于

GET

請求，會将請求參數轉換為

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

對于

POST

請求，且

header['content-type']

為

application/json

的資料，會對請求參數進行 JSON 序列化

對于

POST

請求，且

header['content-type']

為

application/x-www-form-urlencoded

的資料，會對請求參數轉換為

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

取消一個請求

基礎庫 1.4.0 開始支援，低版本需做相容處理

示例代碼：

const requestTask = wx.request({
  url: 'test.php', //僅為示例，并非真實的接口位址
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json'
  },
  success: function(res) {
    console.log(res.data)
  }
})

requestTask.abort() // 取消請求任務
           

簡單封裝

const CONFIG = require('./config.js')
const request = (url, method, data) => {
  let requestUrl = CONFIG.BASE_URL + url;
  return new Promise((resolve, reject) => {
    wx.request({
      url: requestUrl,
      method: method,
      data: data,
      success(r) {
        resolve(r.data)
      },
      fail(error) {
        reject(error)
      },
      complete() {

      }
    })
  })
}
/**
 * 擴充微信小程式的 Promise finally函數
 */
Promise.prototype.finally = function(callback) {
  var Promise = this.constructor;
  return this.then(
    function(value) {
      Promise.resolve(callback()).then(
        function() {
          return value;
        }
      );
    },
    function(reason) {
      Promise.resolve(callback()).then(
        function() {
          throw reason;
        }
      );
    }
  );
}

module.exports = {
  request
}
           

調用:

const {request} = require('../../utils/request.js')
Page({
  onLoad: function () {
    request('http://192.168.8.104:8080/list', "get", {
      key: 'name',
      value: 'qfxl'
    }).then(res => {

	})
  }
})
           

log:

requestUrl => http://192.168.8.104:8080/list

method => POST

params => {“key”:“name”,“value”:“qfxl”}

response => {“data”:{“msg”:“請求成功”,“code”:0,“data”:[{“value”:“qfxl”,“key”:“name”},{“value”:“qfxl”,“key”:“name”},{“value”:“qfxl”,“key”:“name”},{“value”:“qfxl”,“key”:“name”},{“value”:“qfxl”,“key”:“name”}]},“header”:{“Content-Type”:“text/json;charset=utf-8”,“Content-Length”:“190”,“Date”:“Fri, 15 Jun 2018 06:55:08 GMT”},“statusCode”:200,“errMsg”:“request:ok”}

開發環境跳過域名校驗

在微信開發者工具中，可以臨時開啟 開發環境不校驗請求域名、TLS版本及HTTPS證書 選項，跳過伺服器域名的校驗。此時，在微信開發者工具中及手機開啟調試模式時，不會進行伺服器域名的校驗。

設定->項目設定->