手机分销网站,合肥制作网站哪家好,东营专业网站建设公司排行,如何在易语言上做网站使用场景
在前端开发中#xff0c;我们经常需要中断请求来优化性能或处理特定的业务需求。以下是一些常见的使用场景#xff1a; 比如
重复请求#xff1a;当页面中多个组件并发调用同一个接口时#xff0c;在第一个请求返回后#xff0c;我们可能需要中断其他组件对该接…使用场景
在前端开发中我们经常需要中断请求来优化性能或处理特定的业务需求。以下是一些常见的使用场景 比如
重复请求当页面中多个组件并发调用同一个接口时在第一个请求返回后我们可能需要中断其他组件对该接口的调用以避免重复请求和冗余数据。这在组件高度复用、不依赖公共 API 的情况下特别有用。竞态请求当页面定时轮询发起请求时如果上一个请求的响应速度比下一个请求慢会导致数据错乱。中断较慢的请求可以确保只处理最新的数据避免竞态条件。无效请求在单页应用中当组件加载过慢路由跳转后可能会导致组件卸载但请求仍在进行中。如果接口返回错误错误提示可能会在其他页面弹出。中断无效请求可以避免不必要的错误提示。大文件上传暂停与恢复在实现大文件上传功能时用户可能会需要暂停和恢复上传过程。中断请求可以实现暂停功能并在需要时重新发起请求以实现恢复上传。
除了以上提到的场景还有许多其他情况需要中断请求以减少对服务器的无效请求。
下面介绍几种终止请求的方案
原生ajax终止请求
abort() 方法
XMLHttpRequest.abort() 方法用于终止 XMLHttpRequest 对象的请求。调用该方法后如果请求正在处理中则会中止该请求如果请求已经完成即已经接收到完整的响应则不会执行任何操作。同时调用该方法会触发 XMLHttpRequest 对象的 abort 事件我们可以在事件处理函数中执行后续的逻辑代码如清除请求相关的数据等。
当一个请求被终止后它的 readyState 属性将变为 0status 属性也会变为 0。
案例代码
// 创建XMLHttpRequest对象
const xhr new XMLHttpRequest();
// 请求地址
const url https://developer.mozilla.org/;
// 初始化请求
xhr.open(GET, url, true);
// 发送请求
xhr.send();
// 监听取消请求
xhr.addEventListener(abort, function () {console.log(请求被abort()取消了);
});
// 定时器模拟取消请求
setTimeout(() {// 取消请求xhr.abort();// 取消请求之后的状态statusconsole.log(abort()之后的xhr.status---, xhr.status);// 取消请求之后的状态readyStateconsole.log(abort()之后的xhr.readyState---, xhr.readyState);
}, 100);
fetch 终止请求
使用 AbortController 可以中断 Fetch 请求。AbortController 是一个新的 Web 标准用于中止 DOM 请求和 Fetch 请求。在执行 Fetch 请求时可以通过 AbortController 创建一个信号对象 signal并将 signal 作为配置选项传递给 fetch() 方法这样就可以通过调用 AbortController 对象的 abort() 方法来中止请求。
案例代码
const controller new AbortController();
const { signal } controller;
// 请求地址
const url https://developer.mozilla.org/;
fetch(url, { signal }).then(response response.json()).then(data console.log(data)).catch(error console.error(error));// 中止 fetch 请求
controller.abort();axios 终止请求
AbortController新版本
从 axios 的 0.22.0 版本开始推荐使用浏览器原生的 AbortController 来终止请求。当使用该方法终止请求时如果请求正在处理中则会中止该请求如果请求已经完成即已经接收到完整的响应则不会执行任何操作。
我们可以通过两种方式来监听终止请求的操作并进行后续处理
使用 AbortController 提供的 onabort 事件通过监听该事件并绑定事件处理函数在函数中执行后续处理逻辑。使用 try…catch终止请求后会触发 catch可以在 catch 中进行后续处理。如果同时使用 onabort 事件和 try…catch则会先触发 onabort 事件再触发 try…catch。
案例代码
// 以vue项目中使用axios为例
// 创建请求控制器
this.controller new AbortController();
console.log(初始声明的请求控制器------, this.controller);const url https://developer.mozilla.org/;
// 第一种方法绑定事件处理程序
this.controller.signal.addEventListener(abort, () {console.log(请求已终止触发了onabort事件);// 进行后续处理
});// 第二种方法try...catch
try {// 发送文件上传请求const res await this.$axios.post(url, {}, {timeout: 0, // 设置超时时间为 0/null 表示永不超时signal: this.controller.signal, // 绑定取消请求的信号量});
} catch (error) {console.log(终止请求时catch的error---, error);// 判断是否为取消上传if (error.message canceled){// 进行后续处理};
}// 终止请求
this.controller.abort();
console.log(终止请求后的请求控制器------, this.controller);需要注意的是每个 AbortController 可以同时取消多个请求但只能取消请求一次。终止请求后该请求的 signal.aborted 属性会从 false 变为 true。目前暂无方法可以将其恢复为 false。如果后续请求仍然绑定了该请求控制器那么后续请求都会被提前终止不会被发送。
如果想要在终止请求后不影响后续请求的正常发送并且后续请求也能够被终止需要在每次发送请求之前都通过构造函数创建一个新的 AbortController并将每次请求绑定到新的 AbortController 上以确保多次请求之间不会相互干扰。
CancelToken axios 旧版本
在 axios 的 0.22.0 版本之前可以使用取消令牌CancelToken来中止请求。不过从 0.22.0 版本开始该 API 已被弃用不再建议使用。当使用该方法终止请求时如果请求正在处理中则会中止该请求如果请求已经完成即已经接收到完整的响应则不会执行任何操作。
该方法只能通过try…catch来监听取消请求操作终止请求之后会触发catch在catch中进行后续处理。而且该方法在取消请求时可以通过参数自定义catch的error中的message内容。
案例代码
// 以vue项目中使用axios为例// 这个地方需要导入原生的axios 最好不要使用二次封装后的axios
import axios from axios;
const url https://developer.mozilla.org/;
// 创建请求令牌
this.source axios.CancelToken.source();
console.log(初始声明的请求令牌---, this.source);// 第二种方法try...catch
try {// 发送文件上传请求const res await this.$axios.post(url, {}, {timeout: 0, // 设置超时时间为 0/null 表示永不超时cancelToken: this.source.token, // 绑定取消请求的令牌});
} catch (error) {console.log(终止请求时catch的error---, error);// 判断是否为取消上传if (error.message 自定义取消请求的message){// 进行后续处理};
}// 终止请求
this.source.cancel(自定义取消请求的message);
console.log(取消请求后的请求令牌---, this.source);注意该方法与AbortController相同都可以同时取消多个请求但是只能取消请求一次一个CancelToken在终止过请求之后如果后续请求还是绑定该请求令牌则后续请求都会被提前终止不会被发出。
同理如果我们想要在终止请求之后不影响后续请求的正常发出且后续请求也是可以被终止的那么需要在每次发出请求之前都创建一个新的的 CancelToken每次请求绑定的都是新的CancelToken这样才能做到多次请求之间不干扰。
