用promise的方式封装小程序请求

当你习惯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()
        });
    }

})

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值