leyu乐鱼全站官网

 口试官：央求仍是发出去了，如何取消掉这个仍是发出去的央求？

口试者：(脑海里立马产生一个狐疑：仍是发出去的央求还能取消掉？) 这个......这个......还真不清醒。

口试完，立时找度娘.....

保举阅读：axios剖释之cancelToken取消央求旨趣[2]

AbortController[3] 接口默示一个捣毁器对象，不错笔据需要绝交一个或多个Web央求。

Fetch 是 Web 提供的一个用于取得资源的接口，要是要绝交 fetch 央求，则不错使用 Web 提供的 AbortController 接口。

领先咱们使用 AbortController() 构造函数创建一个捣毁器，然后使用 AbortController.signal 属性取得其关联 AbortSignal 对象的援用。当一个 fetch request 启动化时，咱们把 AbortSignal 行为一个选项传递到央求对象 (如下：{signal}) 。这将信号和捣毁器与取得央求联系联，然后允许咱们通过调用 AbortController.abort() 中止央求。 

const controller = new AbortController();  let signal = controller.signal;   console.log('signal 的启动情景: ', signal);  const downloadBtn = document.querySelector('.download');  const abortBtn = document.querySelector('.abort');  downloadBtn.addEventListener('click', fetchVideo);  abortBtn.addEventListener('click', function() {    controller.abort();   console.log('signal 的中止情景: ', signal);  });  function fetchVideo() {    //...    fetch(url, {signal}).then(function(response) {      //...    }).catch(function(e) {      reports.textContent = 'Download error: ' + e.message;    })  }  复制代码 

当咱们中止央求后，汇注央求造成了如下所示的情况：

下面这个场景，就是我以前工作时遇到的真实场景

快速增长的海量数据被收集、存放在大型数据库中，没有强有力的工具，以人类现有的能力很难理解它们。因此，有人说大数据是数据“坟墓”。当采用数据挖掘工具进行数据分析时，可以发现隐藏在大数据之中重要的数据内容、模式，能对商务决策、知识库、科学和医学研究等做出巨大贡献。为解决数据和信息之间的鸿沟，我们应系统地学习数据挖掘知识，开发数据挖掘工具，将数据“坟墓”变成知识“金矿”。

leyu乐鱼全站官网官网客服QQ：865083652

咱们再来望望 AbortSignal 中止前和中止后的情景：

不错看到，AbortSignal 对象的 aborted 属性由启动时的 false 造成了中止后的 true 。

线上运行示例[4] (代码开端于MDN[5])

AbortControllter 有兼容性问题，如下：

axions 中断央求有两种神志：

使用 CancelToken.souce 工场法子创建一个 cancel token，代码如下： 

const CancelToken = axios.CancelToken;  const source = CancelToken.source();  axios.get('https://mdn.github.io/dom-examples/abort-api/sintel.mp4', {    cancelToken: source.token  }).catch(function (thrown) {    // 判断央求是否已中止    if (axios.isCancel(thrown)) {      // 参数 thrown 是自界说的信息      console.log('Request canceled', thrown.message);    } else {      // 不休颠倒    }  });  // 取消央求（message 参数是可选的）  source.cancel('Operation canceled by the user.');  复制代码 

中止后的汇注央求造成如下所示：

咱们再来望望启动时和中止后的 souce 情景：

不错看到，启动时和中止后的 source 情景并没还有发生篡改。那么咱们是如何判断央求的中止情景呢？axios 为咱们提供了一个 isCancel() 法子，用于判断央求的中止情景。isCancel() 法子的参数，便是咱们在中止央求时自界说的信息。

通过传递一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token： 

const CancelToken = axios.CancelToken;  let cancel;  axios.get('/user/12345', {   cancelToken: new CancelToken(function executor(c) {      // executor 函数收受一个 cancel 函数行为参数      ccancel = c;    })  });  // 取消央求  cancel('Operation canceled by the user.');  复制代码 

浏览器运行效能与神志逐个致，此处不再赘述。

线上运行示例[6] (代码开端于MDN[7])

umi-request 基于 fetch 封装, 兼具 fetch 与 axios 的特色, 中止央求与 fetch 和 axios 一致不再过多赘述，确定可见官方文档 中止央求[8]

需要瞩见解是 AbortController 在低版块浏览器polyfill有问题，umi-request 在某些版块中并未提供 AbortController 的神志中止央求。

umi 方法中默许的央求库是umi-request，因此咱们不错使用umi-request提供的法子来中止央求。另外，在umi方法中不错搭配使用了dva，因此底下浅薄先容下在dva中使用CancelToken中止央求的经过。

1、在 services 目次下的文献中编写央求函数和取消央求的函数 

import request from '@/utils/request';  const CancelToken = request.CancelToken;  let cancel: any;  // 契约文献上传 OSS  export async function uploadContractFileToOSS(postBody: Blob): Promise<any> {    return request(`/fms/ossUpload/financial_sys/contractFile`, {      method: "POST",      data: postBody,      requestType: 'form',      // 传递一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token      cancelToken: new CancelToken((c) => {        ccancel = c      })    })  }  // 取消契约文献上传  export async function cancelUploadFile() {    return cancel && cancel()  }  复制代码 

2、在 models 中编写 Effect： 

*uploadContractFileToOSS({ payload }: AnyAction, { call, put }: EffectsCommandMap): any {    const response = yield call(uploadContractFileToOSS, payload);    yield put({      type: 'save',      payload: {        uploadOSSResult: response?.data,      }    })    return response?.data  },  *cancelUploadFile(_: AnyAction, { call }: EffectsCommandMap): any {    const response = yield call(cancelUploadFile)    return response  },  复制代码 

3、在页面中通过dispatch函数触发相应的action： 

// 发起央求  dispatch({    type: 'contract/fetchContractFiles',    payload: {      contractId: `${id}`,    }  })  // 取消央求  dispatch({    type: "contract/cancelUploadFile"  })    复制代码 

4、在 utils/request.js 中谐和不休中止央求的羁系： leyu乐鱼全站官网

const errorHandler = (error: { response: Response }): Response => {    const { response } = error;    notification.destroy()    if (response && response.status) {      const errorText = codeMessage[response.status]