小程序api的promisefy

微信小程序的大部分api是?异步?的。

简单地举个:chestnut::?wx.showToast(Object object)

wx.showToast({
      title: '成功',icon: 'success',duration: 2000,success: function(res) { // TODO },
      fail: function(err) { // TODO }
   });
复制代码

事实上这样的api 写的真够好，但是对于使用者来说并不友好。所以，为了方便同事们更加舒爽地去写代码，于是我开始琢磨封装一个小程序api的?promisefy?的函数。

那么到底怎么封装呢？

// defaultProps为默认属性，extraProps为定制化的属性
 /**
 * promisefy 微信内置函数
 * @param fn
 * @return { promise }
 */
  const promisefy = fn => defaultProps => extraProps => new Promise((resolve,reject) => fn({
    ...defaultProps,...extraProps,success: res => resolve(res),reject: err => reject(err),}));
复制代码

那么到底怎么使用呢？

const showToast = promisefy(wx.showToast)({
  title: '',0);">"none",confirmColor: '#ff673f',mask: true
});

showToast({ title: 'title' }); // 即可使用
复制代码

那么这个promisefy还能怎么用呢？ 1.我们可能会经常使用storage相关的api， 那么到底是把对象JSON.stringify,再setStorage。需要使用的时候再getStorage,最后JSON.parse呢？当然这是一种解决方案。如果使用promisefy，可以这样干。

);
  return Promise.all(Object.entries(param)
    .map(item => promisefy(wx.setStorage)({
      key: item[0],data: item[1]
    })()));
};

setStorage({ a:1,b:2 });
复制代码

const getStorage = param => Promise.all(
  Object.entries(((typeof param) === 'string') ? [param] : param)
    .map(item => promisefy(wx.getStorage)({ key: item[1] })()
      .then(res => ({ [`${item[1]}`]: res.data }))))
  .then(res => res.reduce((prev,curr) => ({ ...prev,...curr }),{}));

getStorage('a'); // { a: 1 },
getStorage(['a','b']); // { a: 1,b: 2 },
复制代码

) ? [param] : param)
    .map(item => promisefy(wx.removeStorage)({ key: item[1] })()));

removeStorage('a');
removeStorage(['b']);
复制代码

2.对于有router 的页面我们经常会出现router 的三种跳转方案。例如微信就提供了三种api:navigateTo，?redirectTo?，navigateBack，这里没有包含小程序跳小程序的api。那么我们是不是可以封装一个公共的方法呢？

) '跳转参数限制于string和对象');
  // 如果路径参数为 object,做以下转换
  if ('object') {
    const rawParams = Object.entries(params).reduce((acc,cur) => {
      if ((!cur[1]) && ((typeof cur[1]) !== 'boolean')) console.warn(${cur[0]}的值为空， 请检查原因！`);
      return ${acc + cur[0]}=1]}&`;
    },0);">'');
    params = rawParams.substr(0,rawParams.length - 1);
  }
  return params;
};

/**
 *
 * @param page 需要跳转的页面或者页面路径(如果是"pages/a/b/b"这样的路径，page='pages/a/b/b',specialUrl=true )
 * @param type
 * @param params
 * @param specialUrl
 * @return {*}
 */
const jumpTo = (page = 'index',type = 'navigate',params = false) => {
  const { navigateTo,redirectTo,navigateBack } = wx;
  const types = {
    navigate: url => promisefy(navigateTo)({ url })(),redirect: url => promisefy(redirectTo)({ url })(),back: delta => promisefy(navigateBack)({ delta })(),};
  params = obj2Url(params);
  console.log('**test**',0);">'params',params,68);">${page}?${params}`);
  if (specialUrl) return types[type](params ? ${params}` : page);
  // 获取跳转参数，如果为数字，则为navigateBack，反之为 navigateTo 或 navigateBack。
  const jumpPram = (typeof page === 'number') ? page : `/pages/${page}/${page}${params ? `?${params}` : ''}`;
  `%c**跳转参数**jumpPram** ${jumpPram}`,0);">'color:white;background:green');
  sendTrack(`**跳转参数**jumpParam** ${jumpPram}`);
  return types[type](jumpPram);
};

jumpTo(// navigateTo到a页面
jumpTo(m: 'm' }); // navigateTo到a页面,路径参数为?m=m
jumpTo('redirect',136);">// redirectTo到a页面,路径参数为?m=m
jumpTo(// back 上一步,路径参数为?m=m
复制代码

项目实践

1.native 小程序开发者。（下载babel-polyfill，导入regeneratorRuntime）

;

const showLoading = promisefy(wx.showLoading)({ title: '加载中',mask: true });
const hideLoading = () => wx.hideLoading();
const showMoshowToast = promisefy(wx.showToast)({ title: 'title',content: true });


const Loading = { show: showLoading,hide: hideLoading };
const Toast = { show: showToast };

const handleErr = (e,cb) => {
  Loading.hide();
  if ((typeof e) === 'string') {
    Toast.show({ title: e || '服务器异常，请稍后再试' });
  } else {
    const { message } = e;
    Toast.show({ title: message || '服务器异常，请稍后再试' });
  }
  cb && cb();
};

const fetchData = () => {}

aync function() {
 try {
  await Loading.show();
  const { data } = await fetchData();
  this.setData({
   data
  })
  Loading.hide();
 } catch (e) {
  handleErr(e)
 }
}
复制代码

2.webpack和taro 用户直接引入用配置bable 相关npm即可,可参考

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!