如何簡單封裝微信小程序請求

微信小程序自帶的wx.request的方法為我們提供了很多的編里,已經(jīng)算得上封裝的比較完善的,我們在使用的時候也可以不進行二次分裝
但是再業(yè)務接口較多,業(yè)務稍微復雜的情況下還是建議隊wx.request()進行簡單的封裝

為什么要封裝呢?

  • 可以針對所有的請求做一次過濾,節(jié)省代碼,不用每次都去處理同一個錯誤相應
  • 針對header里的token等認證字段可以添加一次,全局使用
    廢話不多說先看代碼
import {config} from '../config.js'
const tips = {
    440001: '抱歉,服務出現(xiàn)了一點異常',
    440002: '您沒有權限操作',
    440003: '您當前未登錄',
    440004: '您的登錄已經(jīng)失效,請重新登錄',
    440005: '抱歉,服務出現(xiàn)了一點異常',
    2014: '手機驗證碼失效,請重新獲取',
    2015: '手機驗證碼錯誤,請請重新輸入',
    2021: '更新用戶信息失敗',
    2030: '用戶名不存在',
    2031: '綁定企業(yè)用戶失敗',
    2034: '此用戶已綁定過了微信用戶',
    2072: '圖形驗證碼已失效',
    2073: '驗證碼錯誤',
    3022: '無效驗證碼',
    3021: '請勿重復發(fā)送',
    3020: '驗證碼發(fā)送失敗'
}
class HTTP {
    request({url,data={}, method='GET'}) {
        return new Promise((resolve, reject) => {
            this._request(url, resolve, reject, data, method);
        }).catch((e) => {
            wx.showToast({
                title: '抱歉,出現(xiàn)了一個錯誤', 
                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 };

調(diào)用的方法如下:
把相關業(yè)務的接口寫到一起,方便業(yè)務調(diào)用和區(qū)分

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);
})

這樣一個簡單的封裝就做完了,謝謝!

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容