这是微信小程序官网API列表里面 wx.request(OBJECT)
官方示例
wx.request({
url: 'xxxx.php',
data: {
x: '' ,
y: ''
},
method:"POST",
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log(res.data)
}
})
参数说明
参数名 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
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 | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
优雅的封装
我写在了page的同级目录utils下的utils.js
const requestData = {
/**
* url = String 请求地址
* obj = Object 请求参数
* success = function 成功回调
* fail = function 成功回调
*/
get: (url, data, success, fail) => {
if ((typeof data) == 'function') {
if (success && (typeof success) == 'function') {
fail = success;
}
success = data;
data = '';
console.log(success, data, fail)
}
wx.request({
url: url,
data: data || '',
header: {},
method: 'GET',
dataType: 'json',
responseType: 'text',
success(res) {
if (success) {
success(res);
}
},
fail(res) {
if (fail) {
fail(res);
}
wx.hideLoading();
wx.showToast({
title: '请求超时',
icon: 'loading',
duration: 2000
})
},
complete: function () {
wx.hideLoading();
}
})
},
post: (url, data, success, fail) => {
if ((typeof data) == 'function') {
if (success && (typeof success) == 'function') {
fail = success;
}
success = data;
data = '';
console.log(success, data, fail)
}
wx.request({
url: baseUrl + url,
data: data || '',
header: {},
method: 'POST',
dataType: 'json',
responseType: 'text',
success(res) {
if (success) {
success(res);
}
},
fail(res) {
if (fail) {
fail(res);
}
}
})
},
del: (url, data, success, fail) => {
if ((typeof data) == 'function') {
if (success && (typeof success) == 'function') {
fail = success;
}
success = data;
data = '';
console.log(success, data, fail)
}
wx.request({
url: baseUrl + url,
data: data || '',
header: {},
method: 'DELETE',
dataType: 'json',
responseType: 'text',
success(res) {
if (success) {
success(res);
}
},
fail(res) {
if (fail) {
fail(res);
}
}
})
},
put: (url, data, success, fail) => {
if ((typeof data) == 'function') {
if (success && (typeof success) == 'function') {
fail = success;
}
success = data;
data = '';
console.log(success, data, fail)
}
wx.request({
url: baseUrl + url,
data: data || '',
header: {},
method: 'PUT',
dataType: 'json',
responseType: 'text',
success(res) {
if (success) {
success(res);
}
},
fail(res) {
if (fail) {
fail(res);
}
}
})
}
}
module.exports = {
requestData: requestData
}
封装之后的使用
在js的代码示例
// 一定记得先引入
const {requestData} = require('../../utils/util');
requestData.get('你的请求URL', res => {
if (res.statusCode == 200) {
console.log(res)
this.setData({
hotList: res.data.body
});
} else {
console.log(res.errMsg)
}
}, err => {
console.log(err)
})