门户网站设计,内黄县住房和城乡建设局网站,济南的企业网站建设,网页设计与制作设计网页源文件大厂面试题分享 面试题库前后端面试题库 #xff08;面试必备#xff09; 推荐#xff1a;★★★★★地址#xff1a;前端面试题库问题之前在业务上有这样一个场景#xff0c;通过 script 标签动态引入了一个外部资源#xff0c;具体方式是这样的const script document.…大厂面试题分享 面试题库前后端面试题库 面试必备 推荐★★★★★地址前端面试题库问题之前在业务上有这样一个场景通过 script 标签动态引入了一个外部资源具体方式是这样的const script document.createElement(script);
script.src xxx;
script.async true;
document.body.appendChild(script);
复制代码最近发现在某些情况下需要取消这个请求因此对取消script标签发出的请求的方法进行研究。取消请求的几种方式取消 XMLHttpRequest 请求// 发送请求const xhr newXMLHttpRequest();
xhr.open(GET, url, true);
xhr.send();
// 1s后取消请求的两种方法// a. 设置超时时间属性在 IE 中超时属性可能只能在调用 open()方法之后且在调用 send()方法之前设置。
xhr.timeout 1000;
// b. 利用abort方法setTimeout(() {xhr.abort();
}, 1000);
复制代码取消 fetch 请求fetch请求的取消主要依赖于AbortController对象当fetch 请求初始化时我们将 AbortSignal 作为一个选项传递进入请求的选项对象中下面的 {signal}。const controller newAbortController();
fetch(url, { signal: controller.signal });
// 1s后取消请求setTimeout(() {controller.abort();
}, 1000);
复制代码取消 axios 请求取消 axios 请求同样依赖于 AbortController 对象。const controller newAbortController();
axios.get(url, { signal: controller.signal });
// 1s后取消请求setTimeout(() {controller.abort();
}, 1000);
复制代码取消使用script标签通过对网上的资料进行整理并没有发现直接取消 script 标签发起的请 求的方法。并且当请求发出后对 script 进行的操作如删除 dom 节点也不会造成影响。那么能不能将 script 发起的请求改为使用以上三种方法之一来实现呢改为 fetch 方法我首先尝试了 fetch 方法。通过使用 fetch 方法对网址进行请求我发现请求得到的类型是一个 ReadableStream 对象。MDN上提供了一种方法可以获取到 ReadableStream 对象中的内容fetch(https://www.example.org).then((response) response.body).then((rb) {const reader rb.getReader();returnnewReadableStream({start(controller) {// The following function handles each data chunkfunctionpush() {// done is a Boolean and value a Uint8Arrayreader.read().then(({ done, value }) {// If there is no more data to readif (done) {console.log(done, done);controller.close();return;}// Get the data and send it to the browser via the controllercontroller.enqueue(value);// Check chunks by logging to the consoleconsole.log(done, value);push();});}push();},});}).then((stream) // Respond with our streamnewResponse(stream, { headers: { Content-Type: text/html } }).text()).then((result) {// Do things with resultconsole.log(result);});
复制代码使用这种方法我就通过 fetch 方法获取到了原来 script 标签请求的内容也就可以使用 AbortController 来控制请求的取消。改为 XMLHttpRequest 方法尝试使用 fetch 方法解决问题之后我又对 XMLHttpRequest 进行了尝试发现这种方法更加简便获取的请求内包含一个 responseText 字段就是我需要的内容并且在请求未成功或尚未发送的情况下这个值为 null 也就更方便进行请求是否成功的判断。结论对于 script 标签发出的请求我们无法取消但是我们可以通过其他的方法来达到 script 标签的效果因为 XMLHttpRequest 已经足够简便我就没有对 axios 进行尝试相信也肯定可以达到同样的目标有兴趣的同学可以尝试一下。大厂面试题分享 面试题库前后端面试题库 面试必备 推荐★★★★★地址前端面试题库
