微信小程序之网络请求-即速应用

概述

微信网络请求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”}