小程序api的promisefy

需求背景

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

簡單地舉個🌰: 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),
    fail: err => reject(err),
  }));
複製代碼

     那麼到底怎麼使用呢？

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

showToast({ title: 'title' }); // 便可使用
複製代碼

     那麼這個promisefy還能怎麼用呢？ 1.咱們可能會常常使用storage相關的api， 那麼究竟是把對象JSON.stringify, 再setStorage。須要使用的時候再getStorage, 最後JSON.parse呢？固然這是一種解決方案。若是使用promisefy，能夠這樣幹。

/** * * @param 須要往LocalStorage裏面存數據 * @returns {Promise<any[] | never>} */
const setStorage = (param = {}) => {
  if (!Object.keys(param).length) throw new Error('輸入的對象不爲空');
  return Promise.all(Object.entries(param)
    .map(item => promisefy(wx.setStorage)({
      key: item[0],
      data: item[1]
    })()));
};

setStorage({ a:1, b:2 });
複製代碼

/** * * @param 須要從storage 讀取的key。 * 單個值直接傳string, 多個值傳數組 * eg. ['key1', 'key2', 'key3'] 或者 'key1' ; * @returns {key1: value1, key2: value2, key3: key3 } */
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 須要從storage 清除記錄eg. [key1, key2], key3。 */
const removeStorage = param => Promise.all(
  Object.entries(((typeof param) === 'string') ? [param] : param)
    .map(item => promisefy(wx.removeStorage)({ key: item[1] })()));

removeStorage('a');
removeStorage(['a', 'b']);
複製代碼

2.對於有router 的頁面咱們常常會出現router 的三種跳轉方案。例如微信就提供了三種api:navigateTo，redirectTo，navigateBack，這裏沒有包含小程序跳小程序的api。那麼咱們是否是能夠封裝一個公共的方法呢？

// 路徑參數的拼接
const obj2Url = params => {
  if (params instanceof Array || typeof params === 'number') throw new Error('跳轉參數限制於string和對象');
  // 若是路徑參數爲 object, 作如下轉換
  if (typeof params === 'object') {
    const rawParams = Object.entries(params).reduce((acc, cur) => {
      if ((!cur[1]) && ((typeof cur[1]) !== 'boolean')) console.warn(`${cur[0]}的值爲空， 請檢查緣由！`);
      return `${acc + cur[0]}=${cur[1]}&`;
    }, '');
    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 = '', specialUrl = 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**', 'params', params, `${page}?${params}`);
  if (specialUrl) return types[type](params ? `${page}?${params}` : page);
  // 獲取跳轉參數，若是爲數字，則爲navigateBack，反之爲 navigateTo 或 navigateBack。
  const jumpPram = (typeof page === 'number') ? page : `/pages/${page}/${page}${params ? `?${params}` : ''}`;
  console.log(`%c**跳轉參數**jumpPram** ${jumpPram}`, 'color:white;background:green');
  sendTrack(`**跳轉參數**jumpParam** ${jumpPram}`);
  return types[type](jumpPram);
};

jumpTo('a'); // navigateTo到a頁面
jumpTo('a', 'navigate', { m: 'm' }); // navigateTo到a頁面 ,路徑參數爲?m=m
jumpTo('a', 'redirect', { m: 'm' }); // redirectTo到a頁面 ,路徑參數爲?m=m
jumpTo(1, 'redirect', { m: 'm' }); // back 上一步 ,路徑參數爲?m=m
複製代碼

項目實踐

1.native 小程序開發者。（下載babel-polyfill，導入regeneratorRuntime）

import regeneratorRuntime from '你放置的文件夾';

const showLoading = promisefy(wx.showLoading)({ title: '加載中', mask: true });
const hideLoading = () => wx.hideLoading();
const showToast = promisefy(wx.showToast)({ title: 'title', content: '', mask: 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便可, 可參考

總結分析

函數的科裏化幹了什麼？

    參考 科裏化

怎麼避免過多使用switch...case,if...else等？

    參考 策略模式

扁平化數組操做。

    參考 編寫扁平化的代碼

異常的處理。