断断续续的我又回来了，虽然没几个人看，但是呢自己总要有点仪式感。主要是最近又写了一个小程序，发现写完 vue 回头写微信小程序 简直顺畅的不得了，比我直接用 Android 切过去可真的好太多了。OK，废话停止，正文开始...
前提：
已在 微信公众平台 ==》开发 ==》 开发管理 ==》 服务器域名 request合法域名 中配置请求的基础域名。还有 uploadFile合法域名、socket合法域名 等，按照需求配置相关域名即可。多个域名用 ;(英文;) 隔开即可。
例如：请求的路径为 https://www.baidu.com/api，只需配置 https://www.baidu.com
准备：
首先 了解清楚以下：
请求url: 微信小程序中唯一必填字段，
请求方式 ：一般是 GET/POST，微信小程序默认GET
请求头：
content-type ：请求的参数格式，微信小程序默认 ‘application/json’,常用的还有 "application/x-www-form-urlencoded" ,
Accept：接收的数据格式， 一般为'application/json'
请求参数：根据请求头设置的参数格式写对应的参数即可，如果没有则不写
对于请求参数不理解的 可以看 👉HTTP请求中的参数提交 && GET和POST两种基本请求方法的区别
) 👈
开始使用：
相关 API 使用的聚合数据 免费API, 需要可自己注册账号获取即可 https://www.juhe.cn
let city = '上海';
let key = '6483ffe27e1425d240365e190a7993dc';
wx.request({
url:'https://apis.juhe.cn/simpleWeather/query?city='+city+'&key='+key,
method:'GET',//请求方式
header:{
'content-type': 'application/x-www-form-urlencoded'//请求头 根据项目配置
},
success(res){
console.log('success =====',res)
},
fail(res){
console.log('fail =====',res)
},
complete(res){
console.log('complete =====',res)
}
})
var params = {
city: '上海',
key: '6483ffe27e1425d240365e190a7993dc' }
wx.request({
url: 'https://apis.juhe.cn/simpleWeather/query',
method:'POST',//请求方式
data:params,//参数
header:{
'content-type': 'application/x-www-form-urlencoded'//请求头 根据项目配置
},
success(res){
console.log('success =====',res)
},
fail(res){
console.log('fail =====',res)
},
complete(res){
console.log('complete =====',res)
}
})
无论使用哪种方式都可以请求到数据：
result.png
只要和确定好请求参数，请求头，请求方式，就可以正常获取到数据。
BUT 网络请求是异步的，也就是你不能把获取到的数据 return 给调用者，需要通过回调把数据传回给调用者。（PS：如果你非要每次请求都单独写一个请求方法，完全可以在异步回调中直接处理，但是 应该没有这样的吧 会把自己累死的）
封装：
1、封装网络请求，要清楚哪些是可变的，哪些是不变的。
通常来说 header 不会每次都变，当然 也有可能会变化 （万一后台就是玩呢，同一个项目不同的请求非要搞不同的 header 呢 ，嗯 前端的脾气就是这样被磨没的。所以针对这种情况也写好，整的死死的，来啥样的 照收不误。但是代码还是要尽量保持整洁 毕竟维护的还是我们自己），参数/请求地址url/请求方法，肯定是会变的。
2、对请求结果的处理
通常会把成功获取数据的交给调用者自己处理，如果失败 还是统一处理比较好，毕竟每次调用都处理失败 也是挺多冗余代码的。
var defaultHeader = {
'Accept': 'application/json',
'content-type': 'application/x-www-form-urlencoded',
}
request:function(url,method,header,data,successCB,failCB){
wx.showLoading({
title: '加载中...',
mask:true
})
wx.request({
url: rootUrl + url,
method:method,
data:data?data:'',
header:header?header: defaultHeader,
success(res){
if(res.statusCode==200){
// 处理数据 不需要返回所有数据
if(successCB && typeof successCB == "function"){
successCB(res.data)
}
}else{
// 服务器错误 此时给出提示 且 不允许用户下一步操作
wx.showModal({
title:'温馨提示',
content:'出错了，请稍后重试',
showCancel:false,
})
}
},
fail(res){
// 提示报错信息
wx.showModal({
showCancel: false,
content: res.errMsg
});
// 调用者处理,也可不处理
if(failCB && typeof failCB == "function"){
failCB(res)
}
},
complete(res){
// 无论成功失败 加载结束 加载框消失
wx.hideLoading({
complete: (res) => {
// 这里处理下 否则真机会报错
//in promise) MiniProgramError {"errMsg":"hideLoading:fail:toast can't be found"}
console.log('hideLoading',res)
},
})
}
})
}
主要的请求写好了，这样的话这个请求方法的参数也太多了，所以，多写个方法简化下
get:function(url,data, successCB, failCB){
return request(url,data,'GET',data, successCB, failCB)
},
post:function(url,data, successCB, failCB){
return request(url,data,'POST',data, successCB, failCB)
},
调用
// =========GET============
let city = '上海';
let key = '6483ffe27e1425d240365e190a7993dc';
this.get('simpleWeather/query?city='+city+'&key='+key,null,function(res){
console.log('success===',res)
}, function(err){
console.log('fail===', err)
});
// =========POST============
let param = {
city:'上海',
key:'6483ffe27e1425d240365e190a7993dc'
}
this.post('simpleWeather/query',param,function(res){
console.log('success===',res)
}, function(err){
console.log('fail===', err)
});
使用Promise封装：
个人认为，使用 Promise 最大的好处就是可以 链式调用！ && 回调方法！ 链式调用让代码简洁、易读,尤其是代码的请求存在前后关系的时候，
promiseRequest:function(url,data,method,header){
var defaultHeader = {
'Accept': 'application/json',
'content-type': 'application/x-www-form-urlencoded',
}
return new Promise(function(resolve,reject){
wx.request({
url: rootUrl + url,
method: method,
data: data ? data : '',
header: header?header:defaultHeader,
success(res) {
if (res.statusCode == 200) {
// 处理数据 不需要返回所有数据
resolve(res.data)
} else {
// 服务器错误 此时给出提示 且 不允许用户下一步操作
wx.showModal({
title: '温馨提示',
content: '出错了，请稍后重试',
showCancel: false,
})
}
},
fail(res) {
// 提示报错信息
wx.showModal({
showCancel: false,
content: res.errMsg
});
let errorMsg = errorMsg(res)
reject(errorMsg)
},
complete(res) {
// 无论成功失败 加载结束 加载框消失
wx.hideLoading({
complete: (res) => {
// 这里处理下 否则真机会报错
//in promise) MiniProgramError {"errMsg":"hideLoading:fail:toast can't be found"}
console.log('hideLoading', res)
},
})
}
})
})
},
可以看到 和封装前最大的区别就是 成功和失败的回调。
继续写一层方便调用
get:function(url,data){
return this.promiseRequest(url,data,'GET',null)
},
post:function(url,data){
return this.promiseRequest(url,data,'POST',null)
},
调用
get('simpleWeather/query?city='+city+'&key='+key,null).then(res=>{
console.log('success get===',res)
}).catch(error=>{
console.log('error get===',error)
})
post('simpleWeather/query?city='+city+'&key='+key,param).then(res=>{
console.log('success get===',res)
}).catch(error=>{
console.log('error get===',error)
})
至此 已完成微信小程序网络请求的基本使用和封装。
但是 其实还有一个隐藏的小问题，通常一个页面会调用多个接口，在第一个接口返回服务器问题的时候，应该取消其他的网络请求，目前还没找到解决方案，希望了解的朋友可以说下，先谢了🤝🤝
最后惯例给自己一句话：
好好地生活和工作很重要，但关照自己的内心更重要
如果心太疲惫 不防换个让心舒服的环境
网友评论