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

基础函数

基础函数的作用是将 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