如何简单封装微信小程序请求

微信小程序自带的wx.request的方法为我们提供了很多的编里,已经算得上封装的比较完善的,我们在使用的时候也可以不进行二次分装
但是再业务接口较多,业务稍微复杂的情况下还是建议队wx.request()进行简单的封装
##为什么要封装呢?
* 可以针对所有的请求做一次过滤,节省代码,不用每次都去处理同一个错误相应
* 针对header里的token等认证字段可以添加一次,全局使用
废话不多说先看代码

import {config} from '../config.js'
const tips = {
    440001: '抱歉,服务出现了一点异常',
    440002: '您没有权限操作',
    440003: '您当前未登录',
    440004: '您的登录已经失效,请重新登录',
    440005: '抱歉,服务出现了一点异常',
    2014: '手机验证码失效,请重新获取',
    2015: '手机验证码错误,请请重新输入',
    2021: '更新用户信息失败',
    2030: '用户名不存在',
    2031: '绑定企业用户失败',
    2034: '此用户已绑定过了微信用户',
    2072: '图形验证码已失效',
    2073: '验证码错误',
    3022: '无效验证码',
    3021: '请勿重复发送',
    3020: '验证码发送失败'
}
class HTTP {
    request({url,data={}, method='GET'}) {
        return new Promise((resolve, reject) => {
            this._request(url, resolve, reject, data, method);
        }).catch((e) => {
            wx.showToast({
                title: '抱歉,出现了一个错误', 
                icon:'none',
                duration:2000
            })
        });
    }

    _request(url, resolve, reject, data={}, method='GET') {
        let token = wx.getStorageSync('token');
        let openId = wx.getStorageSync('openId');
        wx.request({
            url: config.api_blink_url + url,
            method: method,
            data: data,
            header: {
                'content-type': 'application/json',
                'appId': config.appId,
                'token': token || '',
                'openId': openId || '',
            },
            success: (res) => {
                let code = res.statusCode.toString();
                if (code.startsWith('2')) {
                    if (res.data.code === 440005) {
                        reject()
                        const error_code = res.data.code;
                        this._show_server_error(error_code);
                    } else {
                        resolve(res.data);
                    }
                } else {
                    reject()
                    const error_code = res.data.code;
                    this._show_error(error_code);
                }
            },
            fail: (err) => {
                reject();
                this._show_error(1);
            }
        })
    }
    _show_error(error_code){
        if(!error_code){
            error_code = 1
        }
        const tip = tips[error_code]
        wx.showToast({
            title: tip?tip:tips[1], 
            icon:'none',
            duration:2000
        }) 
    }

    _show_server_error(error_code) {
        if(!error_code){
            error_code = 440005
        }
        const tip = tips[error_code]
        wx.showToast({
            title: tip?tip:tips[1], 
            icon:'none',
            duration:2000
        }) 
    }
}

export { HTTP };


调用的方法如下:
把相关业务的接口写到一起,方便业务调用和区分
```

import {
    HTTP
} from '../utils/http.js';

class AModel extends HTTP {
    getXXXXX(openid) {
        return this.request({
            url: `***/*****/${openid}`,
            method: 'GET'
        })
    }

}

export {
    AModel
}


```
page层
```

import {AModel} from '../../models/***';
const aModel= new AModel();

// 在需要的地方
aModel.getXXXXX(openid).then(res => {
console.log(res);
})


```

这样一个简单的封装就做完了,谢谢!

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雪山上的小灰熊

谢谢支持哦

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值