微信小程序 wx.request
RequestTask wx.request(Object object)发起 HTTPS 网络请求。
示例代码
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
wx.request 不进行二次封装确实不太好用 分享下我这边wx.request的封装
api.js
const app = getApp()
const request = (url, options) => {
return new Promise((resolve, reject) => {
wx.request({
url: `${app.globalData.host}${url}`,
method: options.method,
data: options.data,
header: {
'Content-Type': 'application/json; charset=UTF-8',
'Authorization': app.globalData.accessToken
},
timeout: 10000,
success(request) {
if (request.statusCode === 200) {
resolve(request.data)
} else if (request.statusCode === 401) {
wx.navigateTo({
url: '/pages/login/login'
})
reject(request.data)
} else if (request.statusCode === 500) {
wx.showModal({
title: '系统错误',
content: request.data.errmsg,
})
reject(request.data)
} else {
reject(request.data)
}
},
fail(error) {
wx.showModal({
title: '系统错误',
content: '服务器正在开小差',
})
reject(error.data)
},
complete: function (res) {}
})
})
}
// 把需要Loading的方法进行封装，减少不必要代码
const requestWithLoading = (url, options) => {
return new Promise((resolve, reject) => {
wx.showLoading({
title: '加载中',
})
wx.request({
url: `${app.globalData.host}${url}`,
method: options.method,
data: options.data,
header: {
'Content-Type': 'application/json; charset=UTF-8',
'Authorization': app.globalData.accessToken
},
timeout: 10000,
success(request) {
if (request.statusCode === 200) {
resolve(request.data)
} else if (request.statusCode === 401) {
wx.navigateTo({
url: '/pages/login/login'
})
reject(request.data)
} else if (request.statusCode === 500) {
wx.showModal({
title: '系统错误',
content: request.data.errmsg,
})
reject(request.data)
} else {
reject(request.data)
}
},
fail(error) {
wx.showModal({
title: '系统错误',
content: '服务器正在开小差',
})
reject(error.data)
},
complete: function (res) {
wx.hideLoading()
}
})
})
}
const get = (url, options = {}) => {
return request(url, {
method: 'GET',
data: options
})
}
const getWithLoading = (url, options = {}) => {
return requestWithLoading(url, {
method: 'GET',
data: options
})
}
const post = (url, options) => {
return request(url, {
method: 'POST',
data: options
})
}
const postWithLoading = (url, options) => {
return requestWithLoading(url, {
method: 'POST',
data: options
})
}
const put = (url, options) => {
return request(url, {
method: 'PUT',
data: options
})
}
const putWithLoading = (url, options) => {
return requestWithLoading(url, {
method: 'PUT',
data: options
})
}
// 不能声明DELETE(关键字)
const remove = (url, options) => {
return request(url, {
method: 'DELETE',
data: options
})
}
const removeWithLoading = (url, options) => {
return requestWithLoading(url, {
method: 'DELETE',
data: options
})
}
module.exports = {
get,
getWithLoading,
post,
postWithLoading,
put,
putWithLoading,
remove,
removeWithLoading
}
使用方式
const api = require('../../api/api')
Page()前引入
api.post(login, {
data: ''
}).then(res => {
if(){}
}).catch(err => {
wx.showToast({
title: err.message,
icon: 'none'
})
})
data 参数说明
最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。转换规则如下：
对于 GET 方法的数据，会将数据转换成 query string(encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)…)
对于 POST 方法且 header[‘content-type’] 为 application/json 的数据，会对数据进行 JSON 序列化
对于 POST 方法且 header[‘content-type’] 为 application/x-www-form-urlencoded 的数据，会将数据转换成 query string (encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)…)
如果觉得《微信小程序服务器开小差了 微信小程序wx.request请求封装》对你有帮助，请点赞、收藏，并留下你的观点哦！
