新增promise代理，优化aoploading

anthinkingcoder · anthinkingcoder · commit 009d7054a1df · 2018-08-21T13:38:44.000+08:00
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # vuex-loading
-简化vuex中异步请求，不得不维护loading state的问题，这不是一个loading ui插件，仅仅只是一个简化。
+简化vuex中异步请求，不得不维护loading state的问题,支持代理异步回调与promise
 
 ## Installing
 
@@ -22,10 +22,14 @@ const api = {
     }).catch(error => {
       errorCb(error)
     })
+  },
+  productDetail () {
+    return fetch('/api/productDetail')
   }
 }
 const state = {
-  products: []
+  products: [],
+  productDetail: {}
 }
 
 const getters = {
@@ -34,29 +38,39 @@ const getters = {
   }
 }
 
+//aopLoading(commit,loadingName, fn, isPromise)
+//有两种fn可以代理，第一种fn是一个promise，第二种fn是接受两个回调函数参数->成功回调和失败回调,设置isPromise可以选择指定方式代理。
 const actions = {
-  //aopLoading会代理api.listProduct，然后返回一个被代理的api.listProduct
   listProduct ({{commit}}) {
     let request = vxl.aopLoading(commit, 'productsLoading',api.listProduct)
-    //代理函数调用的时候，会先执行commit('productsLoading',true),在异步请求执行完成后，会在成功回调和失败回调调用前执行commit('productsLoading',false)
     request((result) => {
       commit('setProducts', result)
     }, error => {
-      
+    })
+  },
+  productDetail ({{commit}}) {
+    vxl.aopLoading(commit, 'productDetail', api.productDetail,true)
+    .then((result) => {
+         commit('setProducts', result)
+    }).catch(error => {
+      console.info(error)
     })
   }
 }
 
 const mutations = {
   setProducts (state, item) {
     state.products = item
+  },
+  setProductDetail(state, item) {
+    state.productDetail = item
   }
 }
 
 //使用vxl.mixin将productsLoading相关操作注入state,getters,mutations中，这样我们不需要手写大堆的代码
-vxl.mixin({state,getters,mutations}, ['products'])
+vxl.mixin({state,getters,mutations}, ['products','productDetail'])
 //或者可以指定loading名字
-vxl.mixin({state,getters,mutations}, [{'products':'productsLoading'}])
+vxl.mixin({state,getters,mutations}, [{'products':'productsLoading'},'productDetail'])
 
 export {
   state,getters,actions,mutations
diff --git a/index.js b/index.js
@@ -26,14 +26,26 @@ function mixin({state, getters, mutations}, stateNameArray = []) {
 }
 
 /**
- * 生成loading action
- * @param commit
- * @param loading
- * @param fn
- * @returns {function(*=, *=)}
+ * 代理loading
+ * @param commit vuex commit
+ * @param loading loading name
+ * @param fn be proxy function
+ * @param isPromise fn是否返回promise，false表示fn不返回promise， 而是以回调的形式返回
  */
-function aopLoading(commit, loading, fn) {
+
+function aopLoading(commit, loading, fn, isPromise = false) {
   loading = normalizeMutationName(loading)
+  return isPromise ? aopPromise(commit, loading, fn) : aopCallback(commit, loading, fn);
+}
+
+/**
+ * 生成loading action(回调式)
+ * @param commit vuex commit
+ * @param loading loading name
+ * @param fn be proxy function
+ * @returns {function(*=, *=)} proxy function
+ */
+function aopCallback(commit, loading, fn) {
   return (success, error, ...otherArg) => {
     commit(loading, true)
     success = pointer(commit, loading, success)
@@ -45,6 +57,31 @@ function aopLoading(commit, loading, fn) {
   }
 }
 
+/**
+ * 生成loading action(promise式)
+ * @param commit vuex commit
+ * @param loading loading name
+ * @param fn be proxy function
+ * @returns {function(*=, *=)} proxy function
+ */
+function aopPromise(commit, loading, fn) {
+  let showLoading = () => {
+    commit(loading, true)
+  }
+  let hideLoading = (result) => {
+    commit(loading, false)
+    return result
+  }
+  return (...arg) => {
+    let promise = Promise.resolve(loading)
+    let chain = [showLoading, undefined, fn.bind(null, ...arg), undefined, hideLoading, hideLoading]
+    while (chain.length > 0) {
+      promise = promise.then(chain.shift(), chain.shift())
+    }
+    return promise
+  }
+}
+
 /**
  * 生成loading state
  * mapLoadingState({datasA:[],datasB:[]}) => {datasA:[],datasLoading:false,datasB:[],datasBLoading:false}
diff --git a/lib/vuex-loading.js b/lib/vuex-loading.js
@@ -41,14 +41,28 @@ function mixin(_ref) {
 }
 
 /**
- * 生成loading action
- * @param commit
- * @param loading
- * @param fn
- * @returns {function(*=, *=)}
+ * 代理loading
+ * @param commit vuex commit
+ * @param loading loading name
+ * @param fn be proxy function
+ * @param isPromise fn是否返回promise，false表示fn不返回promise， 而是以回调的形式返回
  */
+
 function aopLoading(commit, loading, fn) {
+  var isPromise = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+
   loading = normalizeMutationName(loading);
+  return isPromise ? aopPromise(commit, loading, fn) : aopCallback(commit, loading, fn);
+}
+
+/**
+ * 生成loading action(回调式)
+ * @param commit vuex commit
+ * @param loading loading name
+ * @param fn be proxy function
+ * @returns {function(*=, *=)} proxy function
+ */
+function aopCallback(commit, loading, fn) {
   return function (success, error) {
     for (var _len = arguments.length, otherArg = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
       otherArg[_key - 2] = arguments[_key];
@@ -73,6 +87,35 @@ function aopLoading(commit, loading, fn) {
   };
 }
 
+/**
+ * 生成loading action(promise式)
+ * @param commit vuex commit
+ * @param loading loading name
+ * @param fn be proxy function
+ * @returns {function(*=, *=)} proxy function
+ */
+function aopPromise(commit, loading, fn) {
+  var showLoading = function showLoading() {
+    commit(loading, true);
+  };
+  var hideLoading = function hideLoading(result) {
+    commit(loading, false);
+    return result;
+  };
+  return function () {
+    for (var _len4 = arguments.length, arg = Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      arg[_key4] = arguments[_key4];
+    }
+
+    var promise = Promise.resolve(loading);
+    var chain = [showLoading, undefined, fn.bind.apply(fn, [null].concat(arg)), undefined, hideLoading, hideLoading];
+    while (chain.length > 0) {
+      promise = promise.then(chain.shift(), chain.shift());
+    }
+    return promise;
+  };
+}
+
 /**
  * 生成loading state
  * mapLoadingState({datasA:[],datasB:[]}) => {datasA:[],datasLoading:false,datasB:[],datasBLoading:false}
@@ -194,8 +237,8 @@ function pointer(commit, loading, fn) {
   return function () {
     commit(loading, false);
 
-    for (var _len4 = arguments.length, arg = Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      arg[_key4] = arguments[_key4];
+    for (var _len5 = arguments.length, arg = Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+      arg[_key5] = arguments[_key5];
     }
 
     fn.apply(null, arg);
