网站开发推荐书籍,郑州最新通告,濮阳市建设分局网站,建设教育协会网站文章目录 如何保证批量请求失败#xff0c;只弹出一个toast1使用计数器#xff1a;2使用标志变量#xff1a; 如何减少项目里的if-else1使用多态2使用策略模式3使用字典映射4使用状态模式 babel-runtime 作用是啥如何实现 PDF 预览和下载1浏览器内置PDF阅读器2使用PDF.js库3… 文章目录 如何保证批量请求失败只弹出一个toast1使用计数器2使用标志变量 如何减少项目里的if-else1使用多态2使用策略模式3使用字典映射4使用状态模式 babel-runtime 作用是啥如何实现 PDF 预览和下载1浏览器内置PDF阅读器2使用PDF.js库3后端服务生成图像预览 前端请求中断的方式和原理1 Axios.CancelToken**方式一执行器模式****方式二令牌模式** 2 AbortController令牌中断请求原理执行器模式原理 如何保证批量请求失败只弹出一个toast
1使用计数器
初始化一个计数器记录失败请求的数量。每当请求失败(完成)时计数器加一。 在所有请求结束后检查计数器的值如果等于请求总数则弹出toast。
2使用标志变量
设置一个标志变量默认为false。当第一个请求失败时将标志变量设置为true。 后续的请求失败后检查这个标志变量如果是true则不再进行设置确保toast只弹出一次。 在所有请求结束后检查标志变量如果是true则弹出toast。
所有的请求都通过Promise.all来[并行处理] 最后检查结果数组中是否有失败的情况并且确保只弹出一个toast。 function batchRequest(urls) {let hasFailed false;const promises urls.map(url {return request(url).catch(error {if (!hasFailed) {hasFailed true;}return error; // 返回错误但不直接处理});});Promise.all(promises).then(results {// 检查是否有失败的请求if (results.some(result result Failure)) {if (hasFailed) {showToast(所有请求均失败);}}});
}如何减少项目里的if-else
1使用多态
将if else语句中的不同分支封装成不同的类并定义一个共同的接口或基类通过调用接口或基类的方法来执行相应的逻辑。这样可以将条件判断转移到对象的创建阶段减少代码中的条件判断语句。
2使用策略模式
将if else语句中的不同分支封装成不同的策略类每个策略类实现一种特定的逻辑。通过将策略类作为参数传递给一个统一的执行方法根据不同的情况选择相应的策略类执行逻辑。这样可以将条件判断转移到方法的调用阶段减少代码中的条件判断语句。
3使用字典映射
将if else语句中的不同分支作为字典的键值对根据条件选择相应的键然后通过字典获取对应的值执行相应的逻辑。这样可以将条件判断转移到字典的查找过程减少代码中的条件判断语句。
4使用状态模式
将if else语句中的不同分支封装成不同的状态类每个状态类表示一种特定的状态并定义相应的方法。通过将状态类作为属性保存在一个上下文对象中根据不同的情况切换状态并调用相应状态类的方法执行逻辑。这样可以将条件判断转移到状态的切换过程减少代码中的条件判断语句。
babel-runtime 作用是啥
babel-runtime 的主要作用就是**将在使用 babel 进行代码转换时可能被重用的代码抽取成单独的模块以避免在每个文件中重复出现相同的代码。**它通过模块导入的方式引入这些功能从而避免了对全局作用域的修改或污染。
使用 babel-runtime 通常需要配合 babel-plugin-transform-runtime 插件一起使用。babel-plugin-transform-runtime 插件会进行一些处理例如自动导入 babel-runtime/core-js并将全局静态方法、全局内置对象映射到对应的模块将内联的工具函数移除改成通过 babel-runtime/helpers 模块进行导入如果使用了 async/generator 函数则自动导入 babel-runtime/regenerator 模块等。
这样在代码中如果需要使用特定的功能只需从 babel-runtime 相应的模块中导入即可而不是直接使用全局的对象或函数。
如何实现 PDF 预览和下载
1浏览器内置PDF阅读器
浏览器内置PDF阅读器 是实现PDF文件预览的最直接方式。用户只需在HTML中插入embed或iframe标签并设定其src属性为PDF文件的URL即可。
embed srcpath/to/your-document.pdf typeapplication/pdf width100% height600pxiframe srcpath/to/your-document.pdf width100% height600px/iframe浏览器会自动调用内置的PDF阅读器插件来显示PDF内容实现预览效果。这种方法的优点是简单快捷、不依赖外部库但可能在PDF文件较复杂或需要额外交互时遇到限制
2使用PDF.js库
使用JavaScript库PDF.js 是另外一种流行的方式它是一个通用的、兼容各主流浏览器的PDF阅读器。PDF.js使用HTML5的Canvas API对PDF文件进行渲染使其能在不支持插件的情况下工作。
要使用PDF.js你需要首先引入该库
script srchttps://mozilla.github.io/pdf.js/build/pdf.js/script随后你可以通过JavaScript代码加载PDF文件并在指定的Canvas上渲染出来
pdfjsLib.getDocument(path/to/your-document.pdf).promise.then(function(pdfDoc) {pdfDoc.getPage(1).then(function(page) {var canvas document.getElementById(pdf-canvas);var context canvas.getContext(2d);var viewport page.getViewport({scale: 1});canvas.height viewport.height;canvas.width viewport.width;var renderContext {canvasContext: context,viewport: viewport};page.render(renderContext);});
});3后端服务生成图像预览
在一些情况下前端直接处理PDF文件可能不是最佳选择尤其是涉及到安全性或者性能时。这时你可以选择后端服务生成图像预览
后端服务可以用第三方库如Python的PyMuPDF或Java的Apache PDFBox来处理PDF文件将其转换成图片并发送到前端
这种方法的优点是前端不需要处理复杂的文件渲染降低了前端的计算和渲染压力。不过这也意味着增加了后端的处理负载并需要处理前后端之间的文件传输。
前端请求中断的方式和原理
1 Axios.CancelToken
axios对象有一个属性叫CancelToken该属性提供了中断已经发出去的请求的方式。具体使用方式有两种
方式一执行器模式
const CancelTokenFunc axios.CancelToken;
let cancel;
// 发送请求
axios.get(https://jsonplaceholder.typicode.com/todos/1, {cancelToken: new CancelTokenFunc(function executor(c) {// 将 cancel 函数赋值给外部变量cancel c;}),
}).catch((error) {console.log(error.message);});
// 取消请求
setTimeout(() {cancel(Operation canceled by the user.);}, 1000);先获取一个中断构造函数CancelTokenFunc用这个构造函数new出一个实例赋值给get请求的参数cancelToken字段。
在调用CancelTokenFunc构造函数new出一个实例的时候我们传入了一个执行器函数该执行器会接受一个参数这个参数就是用来控制中断请求的取消函数接着我们把该参数函数赋值给外部变量这样就可以在外部需要的时候执行中断请求的操作。
方式二令牌模式
// 创建一个 CancelToken 源
const CancelTokenFunc axios.CancelToken;
const { token, cancel } CancelTokenFunc.source();
// 发送请求
axios.get(https://jsonplaceholder.typicode.com/todos/1, {cancelToken: token,}).catch((error) {console.log(error.message);});
// 取消请求
setTimeout(() {cancel(Operation canceled by the user.)}, 1000);用CancelTokenFunc的source方法生成一个取消令牌源并从取消令牌源中解构出token和cancel字段然后在GET请求中将取消令牌源的token传递给cancelToken接着在外部调用请求令牌源的cancel方法来取消请求。
2 AbortController
AbortController是一个Web API用于控制和管理可中止的异步操作例如 fetch 请求、DOM 操作。接下来我们看看怎么用AbortController来中止请求。
// 创建一个 AbortController 信号源
const controller new AbortController();
const { signal } controller;// 发送请求
fetch(https://jsonplaceholder.typicode.com/todos/1, {signal,
}).catch((error) {console.log(error);
});
// 取消请求
setTimeout(() {controller.abort(Operation canceled by the user.);
}, 1000);创建一个AbortController信号源在fetch请求的时候传递一个信号给请求的signal参数之后便可以在请求的外部通过调用信号源的abort方法来取消请求。
令牌中断请求原理
将token声明为对象并在第5行中给token添加一个promise属性该属性是一个Promise实例并且将Promise实例的resolve方法传递给了cancel变量这样当调用执行cancel()的时候就是在执行resolve()token的promise属性就能触发then回调函数。
cancelToken需要携带一个回调属性在外界执行cancel方法时触发回调。
给cancelToken挂载一个Promise实例的属性然后将这个Promise属性的resolved方法传递给cancel当执行cancel函数的时候其实就是执行resolve()从而改变Promise实例的状态我们就能在Promise实例的then方法中执行需要的操作。
function fetchData(url, options {}) {const { cancelToken } options;return new Promise((resolve, reject) {const xhr new XMLHttpRequest();xhr.open(GET, url);// 监听请求状态变化处理请求的常规逻辑// 其他代码// 监听取消请求if (cancelToken) { // 需要在外界调用cancel请求的时候调用xhr.abort()方法中止请求 // 并调用reject函数将Promise对象的状态改成rejected cancelToken.promise.then((msg) { xhr.abort(); reject(new Error(msg)); }) }xhr.send();});
}将token声明为对象并给token添加一个promise属性该属性是一个Promise实例并且将Promise实例的resolve方法传递给了cancel变量当调用执行cancel()的时候就是在执行resolve()token的promise属性就能触发then回调函数.
function CancelToken() {}
CancelToken.source function () {let cancel;const token {promise: new Promise((resolve) {cancel resolve})};return {cancel,token,};
};执行器模式原理
在this上挂载了promise属性该属性是一个Promise对象同时为了达到在外部触发该Promise对象的状态变更我们将其resolve方法保存给了外部变量resolvePromise。声明构造函数的时候声明了executor入参。在执行器调用的时候传入一个函数作为入参同时在函数内部执行resolvePromise()触发this.promise状态变更。
function CancelToken(executor) {let resolvePromise;this.promise new Promise((resolve) { resolvePromise resolve;});executor(function c() {resolvePromise();})
}
