E企盈营销工具技术服务商 热线:4006-838-530

微信小程序封装API请求函数的实践

E企盈直播平台营销卖货系统

基础函数基础函数的作用是将 wx.request 封装成 Promise 对象,通过 export 对外输出。/***  请求业务接口基本方法** @param {Object} [data={}] – 对应wx.request里data参数* @param {Object} [opts={}] – 对应wx.request里其他参数* @returns {Promise}*/export function fetch(data = {}, opts = {}) {    // 通用设置    const options = {        url: ‘https://api.youapp.com/’        header: {            ‘cookie’: `your_key=your_value;`        }    }    return new Promise((resolve, reject) => {        wx.request({            …Object.assign(options, opts),            data,            success: function(res) {                resolve(res);            },            fail: function(err) {                reject(err);            }        })    })    .then(checkStatus)    .catch(() => {        // do something    })}全局异常处理业务接口往往会设置一个标志位,告诉请求方请求是否异常。因为标志位是事先约定好的,所以可以在全局处理异常。示例函数中code为标志位,当code为0时,返回数据;当code不为0时,属于异常情况。这里,处理异常的方法是跳转一个错误页面,可根据项目要求自行设置处理方法。/***  接口返回值状态判断** @param {Object} response – 接口返回值* @returns {Promise}*/function checkStatus(response) {    let msg = ”;    if (response.statusCode >= 200 && response.statusCode < 300) {        let { code } = response.data        switch (code) {            case 0:                // 请求成功,返回一个Promise对象                return Promise.resolve(response.data);                break;            case 1:                // 处理token过期的情况                wx.removeStorageSync(“token”);                msg = ‘哎哟,登录超时,刷新试试’;                break;            default:                msg = ‘哎哟,服务异常,刷新试试’;                break;                }    }    // 防止重复跳转    if (getCurrentPageUrl() != ‘pages/error/error’){        wx.navigateTo({            url: `/pages/error/error?msg=${msg}`        });    }}/*** 获取当前页面url* @returns {String}  当前页面url*/function getCurrentPageUrl(){    let pages = getCurrentPages()    //获取加载的页面    let currentPage = pages[pages.length-1]    //获取当前页面的对象    return currentPage.route    //当前页面url}带Token的请求函数有些业务接口需要携带用户信息。微信小程序通过 token 传递用户信息,具体流程请见小程序官方文档。因此,我们还需要封装一个带Token的请求函数。实现方法是将token存在storage中,每次请求时判断token是否存在。若存在,直接发起请求;若不存在,则先获取token,再发起请求。这里还能用到上面已经封装好的基础函数,来简化函数。/***  带token的请求业务接口** @param {Object} [data={}] – 对应wx.request里data参数,也就是query部分* @param {Object} [opts={}] – 对应wx.request里其他参数* @returns {Promise}*/export function fetchWithToken(data = {}, opts = {}) {    const token = wx.getStorageSync(‘token’);    if (token) {        data.token = token;        return fetch(data, opts)    } else {        return getToken().then((token) => {        data.token = token;        return fetch(data, opts);        })    }}根据微信的登录流程,需要通过 wx.login 获取临时凭证(code),然后用code向后台兑换token,因此 getToken 函数的逻辑是这样的:/*** 获取token* @returns {String} token token值*/function getToken() {    // 返回一个Promise对象    return new Promise((resolve, reject) => {        wx.login({            success: function(res) {                if (res.code) {                    let data = {                        code: res.code                    };                    fetch(data).then((res) => {                        const { token } = res;                        // 把token放在storage中                        wx.setStorageSync(“token”, token);                        // 输出token                        resolve(token);                    });                }else{                    console.log(‘code error’);                }            },            fail: function(err) {                console.log(‘登录失败!’ + err.errMsg);            }        })    })}将这些函数放在一个文件中,并将 fetch 函数和 fetchWithToken 函数输出,就能在页面中调用封装好的请求函数,简化开发过程。 原文https://www.kapeter.com/post/63

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序封装API请求函数的实践
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏