feat: 添加 useRequest + router mode 可配置

packages/fes-plugin-request/package.json

@@ -27,6 +27,7 @@
     "access": "public"
   },
   "peerDependencies": {
+    "vue": "^3.0.4",
     "@webank/fes": "^2.0.0-alpha.0"
   },
   "dependencies": {

packages/fes-plugin-request/src/template/request.js

@@ -1,5 +1,6 @@
 import axios from 'axios';
 import { ApplyPluginsType, plugin } from '@webank/fes';
+import { ref } from 'vue';
 import scheduler from './scheduler';
 import {
     checkHttpRequestHasBody,
@@ -126,3 +127,31 @@ export const request = (url, data, options = {}) => {
         return Promise.reject(context.error);
     });
 };
+
+function isPromiseLike(obj) {
+    return !!obj && typeof obj === 'object' && typeof obj.then === 'function';
+}
+
+export const useRequest = (url, data, options = {}) => {
+    const loadingRef = ref(true);
+    const errorRef = ref(null);
+    const dataRef = ref(null);
+    let promise;
+    if (isPromiseLike(url)) {
+        promise = url;
+    } else {
+        promise = request(url, data, options);
+    }
+    promise.then((res) => {
+        dataRef.value = res;
+    }).catch((error) => {
+        errorRef.value = error;
+    }).finally(() => {
+        loadingRef.value = false;
+    });
+    return {
+        loading: loadingRef,
+        error: errorRef,
+        data: dataRef
+    };
+};

packages/fes-preset-built-in/src/plugins/misc/route/index.js

@@ -170,7 +170,7 @@ const fix = function (routes) {
 
 const getRoutes = function ({ config, absPagesPath }) {
     // 用户配置了routes则使用用户配置的
-    if (config.routes) return config.routes;
+    if (config.router.routes) return config.router.routes;
 
     const routes = [];
     genRoutes(routes, absPagesPath, '/', config);
@@ -215,7 +215,17 @@ const getRoutesJSON = function ({ routes, config }) {
 
 export default function (api) {
     api.describe({
-        key: 'routes'
+        key: 'router',
+        config: {
+            schema(joi) {
+                return joi
+                    .object({
+                        routes: joi.array(),
+                        mode: joi.string()
+                    });
+            },
+            default: {}
+        }
     });
 
     api.registerMethod({
@@ -259,7 +269,8 @@ export default function (api) {
                 runtimePath,
                 routes,
                 config: api.config,
-                routerBase: api.config.base || ''
+                routerBase: api.config.base || '',
+                CREATE_HISTORY: api.config.router.mode === 'history' ? 'createWebHistory' : 'createWebHashHistory'
             })
         });
 

packages/fes-preset-built-in/src/plugins/misc/route/template/routes.tpl

@@ -1,4 +1,4 @@
-import { createRouter as createVueRouter, createWebHashHistory, ApplyPluginsType } from '{{{ runtimePath }}}';
+import { createRouter as createVueRouter, {{{ CREATE_HISTORY }}}, ApplyPluginsType } from '{{{ runtimePath }}}';
 import { plugin } from '@@/core/coreExports';
 
 export function getRoutes() {
@@ -19,8 +19,9 @@ export const createRouter = () => {
   if (router) {
       return router;
   }
+  const history = {{{ CREATE_HISTORY }}}(ROUTER_BASE)
   router = createVueRouter({
-      history: createWebHashHistory(ROUTER_BASE),
+      history,
       routes: getRoutes()
   });
 

packages/fes-runtime/src/index.js

@@ -7,6 +7,7 @@ export {
     RouterLink,
     useLink,
     createWebHashHistory,
+    createWebHistory,
     createRouter
 } from 'vue-router';
 

packages/fes-template-h5/src/pages/index.vue

@@ -2,6 +2,8 @@
     <div class="onepiece">
         fes & 拉夫德鲁 <br />
         <fes-icon @click="clickIcon" :spin="true" class="one-icon" type="smile" />
+        <div v-if="loading" class="loading">loading</div>
+        <div v-else class="data">{{data}}</div>
     </div>
 </template>
 <config>
@@ -12,7 +14,7 @@
 </config>
 <script>
 import { ref, onMounted } from 'vue';
-import { useRouter, request } from '@webank/fes';
+import { useRouter, useRequest } from '@webank/fes';
 
 export default {
     setup() {
@@ -26,41 +28,10 @@ export default {
         const clickIcon = () => {
             console.log('click Icon');
         };
-        request('api', {}, {
-            cache: {
-                cacheType: 'ram',
-                cacheTime: 5 * 1000
-            }
-        }).then((data) => {
-            console.log(data);
-        }).catch((err) => {
-            console.log(err);
-        });
-        setTimeout(() => {
-            request('api', {}, {
-                cache: {
-                    cacheType: 'ram',
-                    cacheTime: 5 * 1000
-                }
-            }).then((data) => {
-                console.log(data);
-            }).catch((err) => {
-                console.log(err);
-            });
-        }, 200);
-        setTimeout(() => {
-            request('api', {}, {
-                cache: {
-                    cacheType: 'ram',
-                    cacheTime: 5 * 1000
-                }
-            }).then((data) => {
-                console.log(data);
-            }).catch((err) => {
-                console.log(err);
-            });
-        }, 6000);
+        const { loading, data } = useRequest('api');
         return {
+            loading,
+            data,
             fes,
             rotate,
             clickIcon