!65 [inula-request]<bugfix> 修复请求取消时 isCancel 判断错误的问题

Merge pull request !65 from 涂旭辉/master

packages/inula-request/examples/cancelRequest/cancelRequestTest.html

@@ -16,42 +16,33 @@
 </div>
 <script src="../../dist/bundle.js"></script>
 <script>
+  import inulaRequest from "../../index";
+
   const sendRequestButton = document.getElementById('sendRequestButton');
   const cancelRequestButton = document.getElementById('cancelRequestButton');
   const message = document.getElementById('message');
 
-  let cancelTokenSource;
+  let controller = new AbortController;
+  const signal = controller.signal;
 
   sendRequestButton.addEventListener('click', function() {
-    message.innerHTML = '';
-    cancelTokenSource = inulaRequest.CancelToken.source();
-
-    inulaRequest.get('http://localhost:3001/data', {
-      cancelToken: cancelTokenSource.token
-    }).then(function(response) {
-      message.innerHTML = '请求成功: ' + JSON.stringify(response.data, null, 2);
-    }).catch(function(error) {
-      message.innerHTML = JSON.stringify(error, null, 2);
-    });
+    setInterval(function() {
+      inulaRequest.get('http://localhost:3001/data', {
+        signal
+      }).then(function(response) {
+        message.innerHTML = '请求成功: ' + JSON.stringify(response.data, null, 2);
+      }).catch(function(error) {
+        if (inulaRequest.isCancel(error)) {
+          message.innerHTML = '请求已被取消： ' + error.message;
+        } else {
+          message.innerHTML = '请求出错： ' + error.message;
+        }
+      });
+    }, 1000)
   });
 
   cancelRequestButton.addEventListener('click', function () {
-    const CancelToken = inulaRequest.CancelToken;
-    const source = CancelToken.source();
-
-    inulaRequest.get('http://localhost:3001/data', {
-      cancelToken: source.token
-    }).then(function(response) {
-      console.log(response.data);
-    }).catch(function(error) {
-      if (inulaRequest.isCancel(error)) {
-        message.innerHTML = '请求已被取消：' + error.message;
-      } else {
-        message.innerHTML = '请求出错：' + error.message;
-      }
-    });
-
-    source.cancel('请求被用户取消。');
+    controller.abort();
   });
 </script>
 </body>

packages/inula-request/src/cancel/CancelError.ts

@@ -17,7 +17,7 @@ import IrError from '../core/IrError';
 import { IrRequestConfig } from '../types/interfaces';
 
 class CancelError extends IrError {
-  constructor(message: string | undefined, config: IrRequestConfig, request?: any) {
+  constructor(message: string | undefined | null, config: IrRequestConfig, request?: any) {
     const errorMessage = message || 'canceled';
     super(errorMessage, (IrError as any).ERR_CANCELED, config, request);
     this.name = 'CanceledError';

packages/inula-request/src/cancel/checkCancel.ts

@@ -15,7 +15,7 @@
 
 // 检查是否为用户主动请求取消场景
 function checkCancel(input: any): boolean {
-  return input.cancelFlag || false;
+  return input.name === 'CanceledError' || input.cancelFlag || false;
 }
 
 export default checkCancel;

packages/inula-request/src/core/IrError.ts

@@ -98,6 +98,7 @@ const errorTypes = [
   'ERR_CANCELED',
   'ERR_NOT_SUPPORT',
   'ERR_INVALID_URL',
+  'ERR_FETCH_FAILED',
 ];
 
 const descriptors: PropertyDescriptorMap = errorTypes.reduce((acc, code) => {

packages/inula-request/src/request/fetchRequest.ts

@@ -19,6 +19,7 @@ import { IrRequestConfig, IrResponse, Cancel } from '../types/interfaces';
 import { Method, ResponseType } from '../types/types';
 import processUploadProgress from './processUploadProgress';
 import processDownloadProgress from './processDownloadProgress';
+import CancelError from '../cancel/CancelError';
 
 export const fetchRequest = (config: IrRequestConfig): Promise<IrResponse> => {
   return new Promise((resolve, reject) => {
@@ -47,8 +48,9 @@ export const fetchRequest = (config: IrRequestConfig): Promise<IrResponse> => {
     // 处理请求取消
     if (cancelToken) {
       cancelToken.promise.then((reason: Cancel) => {
+        const cancelError = new CancelError(reason.message, config);
         controller.abort();
-        reject(reason);
+        reject(cancelError);
       });
     }
 
@@ -166,18 +168,17 @@ export const fetchRequest = (config: IrRequestConfig): Promise<IrResponse> => {
               }
             })
             .catch((error: IrError) => {
-              if (error.name === 'AbortError') {
-                reject(error.message);
-              } else {
-                reject(error);
-              }
+              const irError = new IrError(error.message, 'ERR_FETCH_FAILED', responseData.config, responseData.request, responseData);
+              reject(irError);
             });
         })
         .catch((error: IrError) => {
           if (error.name === 'AbortError') {
-            reject(error.message);
+            const cancelError = new CancelError('request canceled', config);
+            reject(cancelError);
           } else {
-            reject(error);
+            const irError = new IrError(error.message, 'ERR_FETCH_FAILED');
+            reject(irError);
           }
         });
     }

packages/inula-request/src/request/processRequest.ts

@@ -29,10 +29,6 @@ export default function processRequest(config: IrRequestConfig): Promise<IrRespo
     config.cancelToken.throwIfRequested();
   }
 
-  if (config.signal && config.signal.aborted) {
-    throw new CancelError(undefined, config);
-  }
-
   // 拦截可能会传入普通对象
   config.headers = IrHeaders.from(config.headers as Record<string, any>);
 
@@ -53,6 +49,16 @@ export default function processRequest(config: IrRequestConfig): Promise<IrRespo
       return response;
     })
     .catch(error => {
+      if (config.signal?.aborted) {
+        error.response = {
+          data: null,
+          headers: config.headers,
+          status: 200,
+          statusText: 'ok',
+          config,
+        };
+      }
+
       if (!checkCancel(error)) {
         if (config.cancelToken) {
           config.cancelToken.throwIfRequested();