当你习惯async await的写作方式后~写起小程序的 类ajax你会觉得很烦躁,这不是你的问题(都是惯的)
所以当我这种刚接触小程序的看到后第一时间就想改造写这个写法~。
改造目的:
1、远离回调地狱,让代码更简洁
2、async await写法,类同步写法,关注结果
直接步入正题首先就是核心的utils.js
import { Config } from "config.js";//你的配置
import { getType } from "tools.js"//获取参数类型
class UtilsRequest{
constructor() {
"use strict";
this.baseRestUrl = Config.restUrl;
this.onPay = Config.onPay;
}
//http 请求类, 当noRefech为true时,不做未授权重试机制
request(params, noRefetch) {
let that = this;
let url = this.baseRestUrl + params.url;
if (!params.type) {
params.type = 'get'
}
//不需要再次组装地址
if (params.setUpUrl == false) {
url = params.url
}
return new Promise((resolve, reject) => {
wx.request({
url: url,
data: params.data,
method: params.type,
header: {
"content-type": "application/json",
token: wx.getStorageSync("token"),
},
success: function (res) {
//2开头的一般为成功的回调
var code = res.statusCode.toString();
var startChar = code.indexOf("2");
if (startChar == 0) {
resolve(res.data)
} else {
//做一些其他状态码的处理
if (code == "401") {
//请重新登录
}else if(){
}else{
}
reject(res.data)//抛出错误
}
},
fail: function (err) {
reject(err)
},
});
}).catch(function (err) {
that.processError(err)
});
}
//异常弹窗
processError(err) {
let errMsg = err
if (getType(err) === 'Object'){
errMsg = err.errMsg || err.msg
}
wx.showToast({
title: errMsg,
icon: 'none',
duration: 1500
})
}
}
export {
UtilsRequest
}
封装请求home-request.js:
//封装小程序页面请求方法
import {UtilsRequest} from '../../utils/utils.js';
class Home extends UtilsRequest{
constructor(){
super();
}
getData(){
var that=this;
var param={
url: 'banner/1',
};
return this.request(param);
}
};
export {Home};
调用请求方法:
import { Home } from 'home-request.js';
var home = new Home(); //实例化 首页 对象
Page({
data: {
loadingHidden: false,
},
onLoad: function () {
this._loadData();
},
/*加载所有数据*/
_loadData:async function(callback){
var that = this;
// 获得bannar信息
let data = await home.getData();
that.setData({
bannerArr: data,
loadingHidden:true
});
callback && callback()
},
/*下拉刷新页面*/
onPullDownRefresh: function(){
this._loadData(()=>{
wx.stopPullDownRefresh()
});
}
})