商城类微信小程序-网络请求库

2021-04-17 05:04 jianzhan
--------

商城类微信小程序

-------全自动复印恳求系统日志 适用对恳求的进行和响应进一步订制,完成固定不动主要参数、全自动提取回到值特定数据信息、全自动解决响应不正确如token到期全自动跳转的作用。

authorization是历经封裝的恳求方式,一次封裝可多处启用。能够看到,本来27行编码量,降低到了8行。下面大家来看怎样应用,并订制自身的恳求方式。

getPhoto(1).then(data = this.setData({photo1: data}));
带载入框和不正确提醒
wx.showLoading({title: '载入中'});
getPhoto(2).then(data = {
 this.setData({photo1: data});
 wx.hideLoading();
 // throw '我错误了!' //todo 你能够尝试抛出一个出现异常
}).catch(e = {
 wx.showToast({title: '恳求不成功'});
多个恳求(次序恳求)
getPhoto(3).then(data = {
 this.setData({photo1: data});
 return getPhoto(4); //下一个恳求
}).then(data = {
 this.setData({photo2: data})
多个恳求(同时恳求)
Promise.all([getPhoto(5), getPhoto(6)]).then(listData = {
 this.setData({
 photo1: listData[0],
 photo2: listData[1],

work.work.js 储放原始的恳求方式,service储放插口。 按需引入service.js中相应恳求方式并启用。

应用then方式便可以获得到回到值了,假如需要解决不正确,再在后边接catch方式,详见上面第二个恳求示例。

实例教程到这里就完毕了,是否很简易?

进一步封裝示例

或许你还想要一些高級特点,例如说解决诸如固定不动主要参数、全自动提取回到值特定数据信息、全自动解决响应不正确、登陆凭据到期提醒客户并全自动跳转等作用。那你就会用到下面的进阶实例教程了。

例1:固定不动主要参数

某些插口需要固定不动传参,例如说服务平台标志、客户凭据、特殊的header等等。假如每次启用都要手动式传入,不但麻烦,并且也不好于改动。

work.js这层封裝,如今大家能够这样做:

/**
* 插口恳求基类方式
* @param method 恳求方式 必填
* @param url 恳求相对路径 必填
* @param data 恳求主要参数
* @param header 恳求头
* @returns {Promise}
export function request(method, url, data, header = {'Content-Type': 'application/json'}) {
 (method, url);
 return new Promise((resolve, reject) = {
 const response = {};
 wx.request({
 url, method, data, header,
 success: (res) = ess = res.data,
 fail: (error) = response.fail = error,
 complete: () = { ... },

这里大家把手机微信的wx.request API封裝变成自定request方式,回到了一个Promise目标。大家的get、post、put、delete最后启用的都是这个方式。


大家要界定该方式的第四个主要参数header(恳求头),它有一个默认设置值header = {'Content-Type': 'application/json'},当大家沒有传入header时,它会全自动应用默认设置值,大家能够立即更改这个值:

export function request(method, url, data, header = 'Content-Type': 'application/json'}) {
export function request(method, url, data, header ={'Content-Type': 'application/x-www-form-urlencoded'}) {

这样,全部插口将会应用新的默认设置header主要参数开展恳求了。

例2:全自动分析数据信息

服务器回到的数据信息常常有某种固定不动文件格式,需要大家做一些转换才可以应用。拿一个典型的回到值事例来讲:

{
 "code":1,
 "data":{
 "name":"凯"
 "message":""

大家拿到数据信息最先要分辨code值是不是为1,才可以一切正常取出需要的data里边的字段,不为1则要做不正确解决。倘若每次都对回到值做分辨,大家的编码会变得更为杂乱和难于维护保养。 還是在network.js方式里:

export function request(method, url, data, header = {'Content-Type': 'application/json'}) {
 (method, url);
 return new Promise((resolve, reject) = {
 const response = {};
 wx.request({
 url, method, data, header,
 success: (res) = {
 if (res.data.code === 1) { //分辨code值
 ess = res.data.data; // 你将在then方式中看到的数据信息
 } else {
 response.fail = res.data; // 你将在catch方式中接受到该不正确
 fail: (error) = response.fail = error,
 complete: () = { ... },

根据更新改造,大家再度启用service.js中界定的方式将会立即得到正确的数据信息。

例3:通用性不正确解决

服务器回到的不正确常常有规律性可循,以下面这段回到值为例:

{
 "code":-2,
 "data": null,
 "message":"登陆已到期"

接前面的事例,当code值不为1时,message字段回到出现异常信息内容,不一样的code值大家要做不一样的解决,解决方式跟例2相近。

这里假定code为-2时,意味着登陆到期,需要跳转到登陆页

export function request(method, url, data, header = {'Content-Type': 'application/json'}) {
 (method, url);
 return new Promise((resolve, reject) = {
 const response = {};
 wx.request({
 url, method, data, header,
 success: (res) = {
 if (res.data.code === 1) { 
 ess = res.data.data; // 你将在then方式中看到的数据信息
 } else if (res.data.code === -2) { 
 wx.navigateTo({url:'/pages/login/login'}); // 跳去登陆页
 } else {
 response.fail = res.data; // 你将在catch方式中接受到该不正确
 fail: (error) = response.fail = error,
 complete: () = { ... },

这样,当任何一个回到的code值为-2时,小程序都会跳到登陆页了。


实例教程到此完毕,对你有一定的协助的话,随手给个 ♥ 吧! 欢迎你提出提议,或和我一起完善编码!

---------

商城类微信小程序

------------