Optimization: cancel the request of the current page when the page jumps.

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 (

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} />

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',
           })

src/utils/constant.js

@@ -3,3 +3,5 @@ export const RoleType = {
   DEFAULT: 'admin',
   DEVELOPER: 'developer',
 }
+
+export const CANCEL_REQUEST_MESSAGE = 'cancle request'

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