益阳房产网站建设网站提交
微信小程序的网络请求为什么要封装？封装使用有什么好处？
封装的目的是为了偷懒，试想一下每次都要wx.request，巴拉巴拉传一堆参数，是不是很麻烦，有些公共的参数例如header，baseUrl是不是可以封装起少些一些代码。
同时也是为了避免回调地狱，例如一个请求要依赖于上一个请求的回调结果，那么我们就需要嵌套。这样一层一层的嵌套不利于代码维护。
综上就写个封装吧（我的就是简单封装了下，没有参照大神们的复杂封装，我就是为了单纯请求时候想少些几个参数）....
1.新建request.js文件
class WxRequest{
constructor(){}
defaults={
baseUrl:'http://36.137.4.235:8080',
header:{
clientid:"e5cd7e4891bf95d1d19206ce24a7b32e",
Authorization:"",
}
}
interceptors={
request:(config)=>{
return config;
},
response:(response)=>{
return response;
}
}
request(options){
let access_token="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiJtWFFhSEhZa01DQ3NuYkNpZmozWjNLN3dOaFZVRDdEMCIsImNsaWVudGlkIjoiZTVjZDdlNDg5MWJmOTVkMWQxOTIwNmNlMjRhN2IzMmUiLCJ0ZW5hbnRJZCI6IjAwMDAwMCIsInVzZXJJZCI6MSwidXNlck5hbWUiOiJhZG1pbiIsImRlcHRJZCI6MTAzLCJkZXB0TmFtZSI6IueglOWPkemDqOmXqCIsImRlcHRDYXRlZ29yeSI6IiJ9.qfyBJcuu5mEdxKzT3vkvPXxZOgbiHMvmvhEi2IiNpFE";
this.defaults.header.Authorization="Bearer " + access_token
options.url=this.defaults.baseUrl + options.url;
options={...this.defaults,...options}
return new Promise((resolve,reject)=>{
wx.request({
...options,
success:(res)=>{
resolve(res)
},
fail:(err)=>{
reject(err)
}
})
})
}
}const instance = new WxRequest();
instance.interceptors.request=(config)=>{
return config;
}
instance.interceptors.response=(response)=>{
return response;
}
export default instance;
上面我们就创建好了一个request.js文件，并且里面创建了一个Wx.Request类。并且实例化了一下。
下面我们看一下如何调用这个我们创建的实例化对象
1.引用request.js文件并且使用
import instance from "../../utils/request"
Page({
onLoad: function (options) {
this.getList();
},
async getList(){
let res = await instance.request({
url:'/desktop/icon/list',
method:"GET",
data:{
pageSize:"10",
pageNum:"1",
isAsc:"desc"
}
})
console.log(res)
},
})
以上就是一个简单的封装方法，复制粘贴就能用。
里面有个问题，如何不写入async 和await 会这么么样？
没错，时返回一个promise对象。
2.完善请求-statusCode状态码
其实方法里面还有一些问题，这个问题就是，在小程序中，只要服务端返回了结果，就会进入到小程序的success中，那么当服务器返回的结果是401或者是500等结果，也同样进入到了success中，因此上述中就缺少了相关返回结果的判断，下面代码中我们加入statusCode的判断来完善风封装的请求。
我是直接写在了wx.request里面用 switch case 来判断的，你也可以写在别的地方。例如写在拦截器请求拦截器和响应拦截器中，我是觉得我开始参数合并、修改啥的都写在了方法里面，我就依旧在wx.request里面来写就算了。
class WxRequest{
constructor(){
}
defaults={
baseUrl:'http://36.137.4.235:8080',
header:{
clientid:"e5cd7e4891bf95d1d19206ce24a7b32e",
Authorization:"",
}
}
interceptors={
request:(config)=>{
return config;
},
response:(response)=>{
return response;
}
}
request(options){
let access_token="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiJjOFJHelNVQ3RjMGVhWkJxV1VzY3lEb2V4T0dMbXB0ZiIsImNsaWVudGlkIjoiZTVjZDdlNDg5MWJmOTVkMWQxOTIwNmNlMjRhN2IzMmUiLCJ0ZW5hbnRJZCI6IjAwMDAwMCIsInVzZXJJZCI6MSwidXNlck5hbWUiOiJhZG1pbiIsImRlcHRJZCI6MTAzLCJkZXB0TmFtZSI6IueglOWPkemDqOmXqCIsImRlcHRDYXRlZ29yeSI6IiJ9.sacBfJ8qPOEICfFTpbxgRaQN2A368rZITV6_jwB4_-Y";
this.defaults.header.Authorization="Bearer " + access_token
options.url=this.defaults.baseUrl + options.url;
options={...this.defaults,...options}
return new Promise((resolve,reject)=>{
wx.request({
...options,
success:(res)=>{
switch (res.data.code) {
case 200:
return resolve(res.data)
case 401:
wx.showModal({
title: '系统提示',
content: '登陆过期，请重新登录',
showCancel:false,
success (modalres) {
if (modalres.confirm) {
console.log('用户点击确定');
}
}
})
return Promise.reject(res)
default:
wx.showToast({
title: '系统更新中...',
duration:3000
})
return Promise.reject(res)
}
},
fail:(err)=>{
reject(err)
}
})
})
}
}
const instance = new WxRequest();
instance.interceptors.request=(config)=>{
return config;
}
instance.interceptors.response=(response)=>{
return response;
}
export default instance;
2.使用的话参照之前1.使用就行了，没啥大变化。
3.封装更加便捷的方法
大家在用的时候，有没有发现，每次请求虽然比之前简单了，但是还是不够简单。下面我们利用request这个定义的方法，在创建几个更快捷的请求方法。
class WxRequest{
constructor(){
}
defaults={
baseUrl:'http://36.137.4.235:8080',
header:{
clientid:"e5cd7e4891bf95d1d19206ce24a7b32e",
Authorization:"",
},
method:"GET",
data:null
}
interceptors={
request:(config)=>{
return config;
},
response:(response)=>{
return response;
}
}
request(options){
let access_token="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiJjOFJHelNVQ3RjMGVhWkJxV1VzY3lEb2V4T0dMbXB0ZiIsImNsaWVudGlkIjoiZTVjZDdlNDg5MWJmOTVkMWQxOTIwNmNlMjRhN2IzMmUiLCJ0ZW5hbnRJZCI6IjAwMDAwMCIsInVzZXJJZCI6MSwidXNlck5hbWUiOiJhZG1pbiIsImRlcHRJZCI6MTAzLCJkZXB0TmFtZSI6IueglOWPkemDqOmXqCIsImRlcHRDYXRlZ29yeSI6IiJ9.sacBfJ8qPOEICfFTpbxgRaQN2A368rZITV6_jwB4_-Y";
this.defaults.header.Authorization="Bearer " + access_token
options.url=this.defaults.baseUrl + options.url;
options={...this.defaults,...options}
return new Promise((resolve,reject)=>{
wx.request({
...options,
success:(res)=>{
switch (res.data.code) {
case 200:
return resolve(res.data)
case 401:
wx.showModal({
title: '系统提示',
content: '登陆过期，请重新登录',
showCancel:false,
success (modalres) {
if (modalres.confirm) {
console.log('用户点击确定');
}
}
})
return Promise.reject(res)
default:
wx.showToast({
title: '系统更新中...',
duration:3000
})
return Promise.reject(res)
}
},
fail:(err)=>{
reject(err)
}
})
})
}
get(url,data){
return this.request({url:url,method:"GET",data:data})
}
post(url,data){
return this.request({url:url,method:"POST",data:data})
}
put(url,data){
return this.request({url:url,method:"PUT",data:data})
}
delete(url,data){
return this.request({url:url,method:"DELETE",data:data})
}
}
const instance = new WxRequest();
instance.interceptors.request=(config)=>{
return config;
}
instance.interceptors.response=(response)=>{
return response;
}
export default instance;
3.引用request.js文件并且使用新的快捷方法
import instance from "../../utils/request"
Page({
onLoad: function (options) {
this.getList();
},
async getList(){
let data = {
pageSize:"10",
pageNum:"1",
isAsc:"desc"
}
let res = await instance.get('/desktop/icon/list',data)
console.log(res)
},
})
这样是不是更简单了....哈哈哈哈