• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序APIwx.request使用Promise封装统一请求入口统一异常处理 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

http封装js:httpService.js

import {
    Host
} from "./constants.js";

function handleSuccess(result) {
    wx.hideLoading();
}

function handleError(error) {
    var errorCode = error.statusCode;
    if (errorCode == 401) {
        wx.showLoading({
            title: "请先登录"
        });
    } else if (errorCode == 500) {
        if (wx.getStorageSync("token") == "") {
            wx.showToast({
                title: "请先登录",
                icon: "none",
                duration: 2000
            });
        } else {
            wx.showToast({
                title: error.data.error.message + "",
                icon: "none",
                duration: 3000
            });
        }
    } else {
        wx.showLoading({
            title: "网络故障"
        });
    }
}

function header() {
    var head = {
        Authorization: wx.getStorageSync("token")
    };
    return head;
}

function wxPromisify(fn) {
    return function (obj = {}) {
        return new Promise((resolve, reject) => {
            obj.success = function (result) {
                if (result.data.success) {
                    handleSuccess(result);
                    resolve(result.data);
                } else {
                    resolve(result.data);
                    handleError(result);
                }
            };
            obj.fail = function (error) {
                handleError(error);
                reject(error);
            };
            fn(obj);
        });
    };
}

//无论promise对象最后状态如何都会执行
Promise.prototype.finally = function (callback) {
    let P = this.constructor;
    return this.then(
        value => P.resolve(callback()).then(() => value),
        reason =>
            P.resolve(callback()).then(() => {
                throw reason;
            })
    );
};
function checklogin() {

}

function Post(url, paramObj, ischeck) {
    var getRequest = wxPromisify(wx.request);
    if (!ischeck) {
        checklogin()
    }
    return getRequest({
        url: Host + url,
        data: paramObj,
        header: header(),
        method: "POST"
    });
}

function Get(url, ischeck) {
    var getRequest = wxPromisify(wx.request);
    if (!ischeck) {
        checklogin()
    }
    return getRequest({
        url: Host + url,
        header: header(),
        method: "GET"
    });
}

function Delete(url) {
    var getRequest = wxPromisify(wx.request);
    return getRequest({
        url: Host + url,
        header: header(),
        method: "DELETE"
    });
}

function Put(url, paramObj) {
    var getRequest = wxPromisify(wx.request);
    return getRequest({
        url: Host + url,
        data: paramObj,
        header: header(),
        method: "PUT"
    });
}

export const httpService = {
    get: Get,
    post: Post,
    delete: Delete,
    put: Put
};

使用方式

  1. 直接调用,业务页js直接调用, 如:index.js 直接调用 httpservice.js 中的方法
  2. [推荐] 按业务类型封装业务,例如用户处理的各类请求可以统一封装为 userService.js,index.js(业务page)---> 调用userService.js(业务封装js)---> 调用httpService.js(http封装js)

使用示例

1. userService.js

import {
    httpService
} from "./httpService";
import {
    SetWechatUserInfo,
    GetUserInfo,
    SetUserPhone,
    GetMyGifts
} from "./constants";


function setUseInfo(paramObj) {
    return httpService.post(SetWechatUserInfo, paramObj, true);
}

function getUserInfo(paramObj) {
    return httpService.post(GetUserInfo, paramObj, true);
}

function setUserPhone(paramObj) {
    return httpService.post(SetUserPhone, paramObj, true);
}

function getMyGifts(paramObj) {
    return httpService.get(GetMyGifts, paramObj, true);
}


export const userService = {
    setUseInfo,
    getUserInfo,
    setUserPhone,
    getMyGifts
};

2. index.js 片断

...
import {
    userService
} from '../../providers/userService';
...
...
function setUseInfo(input, userResult, cd) {
    userService.setUseInfo(input).then(res => {
        if (res.success) {
            if (res.success) {
                wx.switchTab({
                    url: '/pages/index/index'
                })
            }
            wx.setStorageSync("userInfo", userResult.userInfo)
            app.globalData.userInfo = userResult.userInfo
        }
    }).then(() => {
        cd()
    });
}
...

2. constants.js

export const Host = 'http://localhost:6234/';

export const Login = 'oauth2/token';
export const SetWechatUserInfo = 'api/****************';
export const GetUserInfo = 'api/****************';
export const SetUserPhone = 'api/****************';
export const GetMyFriends = 'api/****************';
export const GetBoostingLeaderboard = 'api/****************';

3. 小程序目录结构


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
教育行业微信小程序能给我们带来哪些作用?发布时间:2022-07-18
下一篇:
微信小程序轮播组件发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap