首页 定制产品 地区报价 案例展示 企业介绍
  • 首页
  • 定制产品
  • 地区报价
  • 案例展示
  • 企业介绍
  • 定制产品

    你的位置:【欧冠体育平台网址】 > 定制产品 > 笔试官:怎么样中缀已发进来的要求?

    笔试官:怎么样中缀已发进来的要求?

    发布日期:2022-08-07 07:29    点击次数:136

     笔试官:要求已经发进来了,怎么样勾销掉这个已经发进来的要求?

    笔试者:(脑海里立马孕育发生一个猜忌:已经发进来的要求还能勾销掉?) 这个......这个......还真不晓得。

    笔试完,当即找度娘.....

    推选浏览:axios剖析之cancelToken勾销要求道理[2]

    AbortController

    AbortController[3] 接口默示一个掌握器工具,可以或许痛处需求截至一个或多个Web要求。

     AbortController():AbortController()布局函数创立一个新的 AbortController 工具实例  signal:signal 属性前去一个 AbortSignal 工具实例,它可以或许用来 with/about 一个Web(网络)要求  abort():截至一个还没有实现的Web(网络)要求,它兴许截至 fetch 要求,任何照顾Body的破费者和流 Fetch 中缀要求

    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;    })  }  复制代码 

    当我们中缀要求后,网络要求变成为了以下所示的环境:

    我们再来看看 AbortSignal 中缀前和中缀后的形态:

    可以或许看到,AbortSignal 工具的 aborted 属性由初始时的 false 变成为了中缀后的 true 。

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

    AbortControllter 有兼容性成就,以下:

    axios 中缀要求

    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 中缀要求

    umi-request 基于 fetch 封装, 兼具 fetch 与 axios 的特征, 中缀要求与 fetch 和 axios 分歧再也不适量赘述,概况可见平易近间文档 中缀要求[8]

    需求留心的是 AbortController 在低版本浏览器polyfill有成就,umi-request 在某些版本中并未供应 AbortController 的编制中缀要求。

    umi 名目中运用 CancelToken 中缀要求

    umi 名目中默认的要求库是umi-request,因而我们可运用umi-request供应的编制来中缀要求。此外,在umi名目中可以或许搭配运用了dva,因而下面俭朴介绍下在dva中运用CancelToken中缀要求的流程。

    一、在 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()  }  复制代码 

    二、在 models 中编写 Effect: 

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

    三、在页面中经由过程dispatch函数触发响应的action: 

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

    四、在 utils/request.js 中统一处理惩罚中缀要求的拦阻: 

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