大佬教程收集整理的这篇文章主要介绍了已发的HTTP request怎么中断？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
AbortController()：AbortController()构造函数创建一个新的 AbortController 对象实例
let controller = new AbortController(); let signal = controller.signal; //signal 的初始状态 //中止请求 controller.abort();
注意：
1. AbortController浏览器兼容性
2.Chrome 内：
signal：signal 属性返回一个 AbortSignal 对象实例，它可以用来查看一个Web(网络)请求的状态
abort()：终止一个尚未完成的Web(网络)请求，它能够终止 fetch 请求，任何响应Body的消费者和流
<script> import { ref,toRefs, reactive, onMounted, onupdated, onUnmounted } from 'vue' export default { setup(props, ctX) { const url = '/api/xxx'; const obj = ref({ msg: ''}); const controller = new AbortController(); let signal = controller.signal; console.log('Original signal:', signal); const download = function fetchVideo() { fetch(url) .then(response => response.json()) .then(function(responsE) { console.log('res:', response.messagE); obj.value.msg = response.message; }).catch(function(E) { obj.msg = 'Download error: ' + e.message; }) }; const abortrequest = () => { controller.abort(); console.log('Abort signal:', signal); } onMounted(() => { console.log('mounted!') }); return {download, obj, abortrequest} } } </script> <template> <h3>Using fetch</h3> <div class="wrapper"> <button @click="download()" class="download">download</button> <button @click="abortrequest(E)" class="abort">abort request</button> </div> <div>{{obj.msg}}</div> </template>
Axios 使用方式1:
使用 CancelToken.souce 工厂方法创建一个 cancel token
<script> import { ref, onMounted } from 'vue'; import axios from 'axios'; export default { setup(props, context) { const cancelToken = axios.CancelToken; const source = CancelToken.source(); const URL = 'http://localhost:xxx/xxx'; const download = () => { axios.get(URL, { cancelToken: source.token }).catch(function (thrown) { // 判断请求是否已中止 if (axios.isCancel(thrown)) { // 参数 thrown 是自定义的信息 console.log('request canceled', thrown.messagE); } else { // 处理错误 } }); }; const abortrequest = () => { source.cancel('Operation canceled by the user.'); console.log('abort') }; onMounted((a, b) => { }) return { download, abortrequest } } } </script> <template> <hr /> <h3>2.1 Using Axios</h3> <div class="wrapper"> <button @click="download()" class="download">download</button> <button @click="abortrequest(E)" class="abort">abort request</button> </div> </template>
效果和fetch相同
Axios 使用方式2: (建议采用)
通过传递一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token：
使用 Axios.CancelToken (基于promisE) 能达到每次触发请求并中断的目的，建议采用Axios 方式二
<script> import { ref, onMounted } from 'vue'; import axios from 'axios'; export default { setup(props, context) { const cancelToken = axios.CancelToken; let cancel; const URL = '/api/xxx'; const download = () => { axios.get(URL, { cancelToken: new CancelToken(function executor(C) { // executor 函数接收一个 cancel 函数作为参数 cancel = c; }) }).catch(function (thrown) { // 判断请求是否已中止 if (axios.isCancel(thrown)) { // 参数 thrown 是自定义的信息 console.log('request canceled', thrown.messagE); } else { // 处理错误 console.log('Handle the error'); } }); }; const abortrequest = () => { cancel('Operation canceled by the user.'); console.log('abort') }; onMounted((a, b) => { }) return { download, abortrequest } } } </script> <template> <hr /> <h3>2.2 Using Axios.</h3> <div class="wrapper"> <button @click="download()" class="download">download</button> <button @click="abortrequest(E)" class="abort">abort request</button> </div> </template>
最后注意：中断http requests，只对http 请求生效，服务端逻辑已经被触发的情况下，是需要服务端根据http 的监听来中断逻辑执行的。
以上是大佬教程为你收集整理的已发的HTTP request怎么中断？全部内容，希望文章能够帮你解决已发的HTTP request怎么中断？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。