请求函数增加cancelable

HighStateComponent/ListViewDiy/index.js

@@ -4,6 +4,24 @@ import { ListView, PullToRefresh, } from 'antd-mobile';
 import LoadingComponent from './LoadingComponent';
 import styles from './ListViewDiy.less';
 
+const makeCancelable = (promise) => {
+  let canceled = false;
+  return {
+    cancel: () => canceled = true,
+    promise: (...args) => new Promise((resolve, reject) => {
+      promise(...args).then(res => {
+        if (!canceled) {
+          resolve(res);
+        } else {
+          reject(res)
+        }
+      }).catch(e => {
+        reject(e);
+      })
+    }),
+  }
+
+};
 
 //  封装的listView组件，展示分页后的数据，可以下拉刷新，滚动到底部请求数据，传递搜索条件刷新。
 //  props:
@@ -72,7 +90,9 @@ export class ListViewDiy extends Component {
       pageSize,
       ...searchValues,
     };
-    this.props.request(params).then(res => {
+    this.cancelableRequest = makeCancelable(this.props.request);
+
+    this.cancelableRequest.promise(params).then(res => {
       this.setState({ hasSearched: true, })
       if (res) {
         const { rows, pageNo, pageSize, hasNextPage, } = res;
@@ -97,6 +117,13 @@ export class ListViewDiy extends Component {
     this.setState(({ pageNo }) => ({ pageNo: pageNo + 1}), () => this.queryData(false));
   }
 
+  componentWillUnmount() {
+    if (this.cancelableRequest) {
+      this.cancelableRequest.cancel();
+    }
+  }
+
+
   render() {
     const { listViewData, isLoading, isRefreshing, height, hasSearched, dataSource, } = this.state;
     const { renderRow, ListSeparator, pageSize = 10, NoResult, renderHeader } = this.props;