1. 原生wx.request()的缺点
wx.request官网说明
- 回调地狱，可能会出现多层success套用的情况（用Promise封装解决）
- 效率低，代码冗杂，每次都要写共同的参数（比如headers,公共的url）
- 可维护性差，后续查看和改代码不方便，封装后都在同一个文件，一目了然
wx.request({
url: 'example.php', //仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
作为一个合格的前端开发，为了代码质量和可维护性（不是因为懒），肯定要对这种代码进行封装，来让我们的代码变得更优雅~~
2. 封装思路
所有的封装思路（无论是组件还是逻辑代码），总结起来一句话就是抽取共性。
观察我们的网络请求代码，可以发现，有很多是一样的，如公共请求路径、对响应错误的处理方法、headers参数（如token）。
不同的如具体的接口地址、请求类型、请求参数，我们封装的时候把相同的抽取成一个文件，不同的地方再进行传参即可。
3. 具体实现代码
先建一个api文件夹（叫什么都可以，但是为了规范化），在下面新建文件request.js
// ----http----
// api URL
const apiUrl = "https://接口地址:端口";// 公共的请求地址
// 封装微信请求方法
const request = (params) => {
let url = params.url;
let data = params.data;
let method = params.method;
let header = {
"Content-Type": "application/json"
};
// 鉴权验证，获取登录之后后端返回的token，存在即在头部Authorization写token，具体的看后端需求
if (wx.getStorageSync("token")) {
// header.Authorization = wx.getStorageSync("token");
header.token = wx.getStorageSync("token");
}
return new Promise((resolve, reject) => {
wx.request({
url: apiUrl + url, // api url
method: method, // get/post
data: data, // 请求参数
header: header, // 头部
success(res) {
// 请求成功
// 判断状态码---errCode状态根据后端定义来判断
if (res.statusCode < 399) {
if (res.data.Code === 401) {
wx.showModal({
title: "提示",
content: "请登录",
showCancel: false,
success(res) {
wx.navigateTo({
url: "/pages/login/login",
});
},
});
reject(res.data);
}
resolve(res.data);
} else {
// 其他异常
switch (res.statusCode) {
case 404:
wx.showToast({
title: '未知异常',
duration: 2000,
})
break;
default:
wx.showToast({
title: '请重试...',
duration: 2000,
})
break;
}
reject("未知错误,请稍后再试");
}
},
fail(err) {
if (err.errMsg.indexOf('request:fail') !== -1) {
wx.showToast({
title: '网络异常',
icon: "error",
duration: 2000
})
} else {
wx.showToast({
title: '未知异常',
duration: 2000
})
}
reject(err);
},
complete() {
wx.hideLoading()
},
});
});
};
module.exports = {
apiUrl,
request,
}
然后再按业务需求，对具体的接口地址进行封装，比如，我这里在api文件夹下再新建一个user.js文件，里面放登录，注册的一些方法，请求类型和请求参数根据接口文档写。
import {
request
} from "./request"
// 用户相关
// 登录
export const login = (params) => {
return request({
url: '/user/login',
data: params,
method: 'POST',
})
}
// 注册
export const register = (params) => {
return request({
url: '/user/reg',
data: params,
method: 'POST',
})
}
正式在项目中使用：
import {
login
} from '../../../api/user'
// 点击登录的方法
handleLogin(){
login({
name: xxx,
password: xxx,
}).then((res) => {
if (res.code == 200) {
// 登录成功之后的处理
} else {
// 登录失败的处理
}
}).catch((res) => {})
}
总结
到此这篇关于微信小程序如何使用Promise对wx.request()封装的文章就介绍到这了,更多相关微信小程序用Promise对wx.request()封装内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
