From 08f40efd2bb52cd6581dba83f4f32a29a0bea73c Mon Sep 17 00:00:00 2001
From: zuiidea <zuiiidea@gmail.com>
Date: Thu, 20 Sep 2018 19:55:32 +0800
Subject: [PATCH] Optimization: cancel the request of the current page when the
 page jumps.

---
 src/layouts/BaseLayout.js    |  9 +++++----
 src/layouts/PrimaryLayout.js |  2 +-
 src/models/app.js            | 30 +++++++++++++++++-------------
 src/utils/constant.js        |  2 ++
 src/utils/request.js         | 21 ++++++++++++++++++++-
 5 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/src/layouts/BaseLayout.js b/src/layouts/BaseLayout.js
index 5ad52f51..d18d4532 100644
--- a/src/layouts/BaseLayout.js
+++ b/src/layouts/BaseLayout.js
@@ -29,10 +29,11 @@ class BaseLayout extends PureComponent {
     const currentPath = location.pathname + location.search
     if (currentPath !== this.previousPath) {
       NProgress.start()
-      if (!loading.global) {
-        NProgress.done()
-        this.previousPath = currentPath
-      }
+    }
+
+    if (!loading.global) {
+      NProgress.done()
+      this.previousPath = currentPath
     }
 
     return (
diff --git a/src/layouts/PrimaryLayout.js b/src/layouts/PrimaryLayout.js
index 8b58e094..5cc7a433 100644
--- a/src/layouts/PrimaryLayout.js
+++ b/src/layouts/PrimaryLayout.js
@@ -72,7 +72,7 @@ class PrimaryLayout extends PureComponent {
         <Layout>
           <MyLayout.Sider {...siderProps} />
           <Layout
-            style={{ height: '100vh', overflow: 'scroll' }}
+            style={{ height: '100vh', overflowY: 'scroll' }}
             id="primaryLayout"
           >
             <Header {...headerProps} />
diff --git a/src/models/app.js b/src/models/app.js
index 8d0389c5..dee64132 100644
--- a/src/models/app.js
+++ b/src/models/app.js
@@ -1,13 +1,11 @@
 /* global window */
-/* global document */
-/* global location */
-/* eslint no-restricted-globals: ["error", "event"] */
 
 import { router } from 'utils'
-import { parse, stringify } from 'qs'
+import { stringify } from 'qs'
 import store from 'store'
 import { RoleType } from 'utils/constant'
-import { queryLayout } from 'utils'
+import { queryLayout, pathMatchRegexp } from 'utils'
+import { CANCEL_REQUEST_MESSAGE } from 'utils/constant'
 import { queryRouteList, logoutUser, queryUserInfo } from 'api'
 import config from 'config'
 
@@ -44,15 +42,21 @@ export default {
       })
     },
 
+    setupRequestCancel({ history }) {
+      history.listen(() => {
+        const { cancelRequest = new Map() } = window
+
+        cancelRequest.forEach((value, key) => {
+          if (value.pathname !== window.location.pathname) {
+            value.cancel(CANCEL_REQUEST_MESSAGE)
+            cancelRequest.delete(key)
+          }
+        })
+      })
+    },
+
     setup({ dispatch }) {
       dispatch({ type: 'query' })
-      let tid
-      window.onresize = () => {
-        clearTimeout(tid)
-        tid = setTimeout(() => {
-          dispatch({ type: 'changeNavbar' })
-        }, 300)
-      }
     },
   },
   effects: {
@@ -89,7 +93,7 @@ export default {
             routeList,
           },
         })
-        if (location.pathname === '/login') {
+        if (pathMatchRegexp('/login', window.location.pathname)) {
           router.push({
             pathname: '/dashboard',
           })
diff --git a/src/utils/constant.js b/src/utils/constant.js
index 63bada82..bd2d3e11 100644
--- a/src/utils/constant.js
+++ b/src/utils/constant.js
@@ -3,3 +3,5 @@ export const RoleType = {
   DEFAULT: 'admin',
   DEVELOPER: 'developer',
 }
+
+export const CANCEL_REQUEST_MESSAGE = 'cancle request'
diff --git a/src/utils/request.js b/src/utils/request.js
index 4a5eda34..f3f070c4 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -2,8 +2,12 @@ import axios from 'axios'
 import { cloneDeep, isEmpty } from 'lodash'
 import pathToRegexp from 'path-to-regexp'
 import { message } from 'antd'
+import { CANCEL_REQUEST_MESSAGE } from 'utils/constant'
 import qs from 'qs'
 
+const { CancelToken } = axios
+window.cancelRequest = new Map()
+
 export default function request(options) {
   let { data, url, method = 'get' } = options
   const cloneData = cloneDeep(data)
@@ -34,6 +38,13 @@ export default function request(options) {
       ? `${url}${isEmpty(cloneData) ? '' : '?'}${qs.stringify(cloneData)}`
       : url
 
+  options.cancelToken = new CancelToken(cancel => {
+    window.cancelRequest.set(Symbol(Date.now()), {
+      pathname: window.location.pathname,
+      cancel,
+    })
+  })
+
   return axios(options)
     .then(response => {
       const { statusText, status, data } = response
@@ -56,9 +67,17 @@ export default function request(options) {
       })
     })
     .catch(error => {
-      const { response } = error
+      const { response, message } = error
+
+      if (String(message) === CANCEL_REQUEST_MESSAGE) {
+        return {
+          success: false,
+        }
+      }
+
       let msg
       let statusCode
+
       if (response && response instanceof Object) {
         const { data, statusText } = response
         statusCode = response.status