微信小程序封装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