中国手工活加工官方网站wordpress底部漂浮

当前位置： 首页 > news >正文

中国手工活加工官方网站,wordpress底部漂浮,wordpress缓存规则,泰安网上房地产官网概述 在 JavaScript 中#xff0c;Promise 是一个表示异步操作最终完成或失败的对象。它本质上是一个返回的对象#xff0c;你可以附加回调函数#xff0c;而不是将回调传递给函数。 let promise new Promise((resolve, reject) {let condition true; // 这可以是某…概述 在 JavaScript 中Promise 是一个表示异步操作最终完成或失败的对象。它本质上是一个返回的对象你可以附加回调函数而不是将回调传递给函数。 let promise new Promise((resolve, reject) {let condition true; // 这可以是某个操作的结果// 1秒后检查条件并解决或拒绝 PromisesetTimeout(() {if (condition) {resolve(Promise 已完成);} else {reject(Promise 被拒绝);}}, 1000); });// 将 then() 和 catch() 处理程序附加到 Promise promise.then(value {// 如果 Promise 已解决则执行此操作console.log(value); // 输出: Promise 已完成}).catch(error {// 如果 Promise 被拒绝则执行此操作console.log(error);});在这个示例中创建了一个 Promise它将在 1 秒后解决或拒绝具体取决于条件的值。如果 Promise 成功将调用 resolve 函数如果 Promise 失败将调用 reject 函数。 当 Promise 解决时then 方法被调用并接收传递给 resolve 函数的值。类似地当 Promise 被拒绝时catch 方法被调用并接收传递给 reject 函数的值。 setTimeout 和事件循环 setTimeout 函数在这个问题中发挥了关键作用。它是一个方法调用一个函数或在指定的毫秒数后评估一个表达式。在 JavaScript 中setTimeout 用于延迟代码的执行。 console.log(启动定时器…);setTimeout(() {console.log(定时已完成); }, 2000);在这个示例中“启动定时器…”将立即记录到控制台。然后调用 setTimeout 函数传递两个参数一个回调函数和以毫秒为单位的延迟。回调函数是一个简单的箭头函数用于将 “定时已完成”记录到控制台延迟为 2000 毫秒或2秒。 一旦调用了 setTimeoutJavaScript 运行时设置了定时器但随后立即继续执行任何后续代码。它不会暂停或等待定时器完成这展示了 JavaScript 的非阻塞特性。 在指定的延迟之后在本例中为2秒将回调函数添加到任务队列中。但重要的是要注意回调函数不一定会在此刻立即执行。回调函数实际执行之前的实际延迟可能会比指定的延迟稍长。这是由于事件驱动的 JavaScript 运行时和单线程事件循环的性质所决定的。 假设主 JavaScript 线程中有一个耗时较长的进程或操作。在这种情况下即使定时器在后台完成回调函数仍必须等待阻塞任务的完成。这是因为事件循环一次只能处理一个任务并按照排队的顺序处理任务。 因此setTimeout 中指定的“2 秒”应被理解为在调用回调函数之前的 “最小延迟”而不是 “保证延迟”。如果 JavaScript 运行时正忙于其他任务回调函数实际执行的时间可能会超过 2 秒。这种行为强调了理解 JavaScript 异步性质的重要性因为它对代码的性能和行为产生重大影响。 另外值得一提的是 clearTimeout这是 JavaScript 定时器函数套件中的一个有用函数。clearTimeout 是一个函数它取消了先前通过调用 setTimeout 建立的定时器。 下面是它的使用示例 console.log(启动定时器…);// setTimeout 返回一个 Timeout 对象可用于引用定时器 let timeoutId setTimeout(() {console.log(定时已完成); }, 2000);// 一些条件或逻辑 if (/* 一些条件 */) {// 取消定时器clearTimeout(timeoutId); }如果 if 语句内部的条件为真那么 clearTimeout 函数将取消通过 setTimeout 设置的定时器。如果取消了定时器setTimeout 提供的函数将不会被调用。 这在各种场景中很有用例如如果要在操作执行之前检查用户是否仍然活跃在页面上但用户在延迟结束之前导航到其他页面你可以使用 clearTimeout 来取消检查。 JavaScript 的事件循环 JavaScript 使用调用堆栈来管理函数的执行。当调用函数时它会被添加到堆栈中。当函数完成时它会从堆栈中移除。由于 JavaScript 是单线程的一次只能执行一个函数。 然而如果一个函数需要较长时间才能执行例如网络请求这可能会有问题。这就是事件循环的用武之地。 事件循环 是一个持续的循环检查调用堆栈是否为空。如果为空它会从任务队列也称为事件队列或回调队列中获取第一个任务并将其推送到调用堆栈中立即执行它。 异步回调 setTimeout 是 JavaScript 中的异步函数示例。当调用 setTimeout 函数时它会启动一个定时器然后立即返回允许 JavaScript 运行时在等待定时器完成的同时继续执行其他代码。这是 JavaScript 的非阻塞特性。 一旦定时器完成给 setTimeout 提供的回调函数将添加到任务队列中。事件循环不断检查调用堆栈和任务队列。当调用堆栈为空时它会从任务队列中获取第一个任务并将其推送到调用堆栈中以执行。 并发和事件循环 以下是 JavaScript 如何处理并发操作的方式 JavaScript 运行一段代码此代码在主线程上运行。当遇到异步操作如 setTimeout、fetch 等时JavaScript 将其启动然后继续运行其余代码。它不会等待异步操作完成。这些异步操作可能在后台运行但不会运行在主 JavaScript 线程上。当异步操作完成时其回调函数将被放入任务队列中。一旦调用堆栈为空即当前事件循环的所有代码都已执行完毕事件循环将从任务队列中获取第一个任务并将其推送到调用堆栈中以立即执行它。 这个过程继续进行事件循环会在调用堆栈为空时将任务从任务队列中推送到调用堆栈从而使 JavaScript 能够处理多个操作尽管它是单线程的。 这是 JavaScript 处理异步操作的高级概述。实际上更复杂还涉及微任务和宏任务等附加特性但这是其基本概念。查看事件循环详解。 Async/await Async/await 可以被看作是 Promise 的语法糖它使异步代码更易于编写和理解。当我们使用 async 关键字标记函数时它将成为一个自动返回 promise 的异步函数。在异步函数中我们可以使用 await 关键字暂停代码的执行直到 promise 解决或拒绝。 通过使用 await我们可以消除使用 promises 时通常需要的明确的 .then() 和 .catch() 链。相反我们可以以更线性和类似同步代码的方式构建代码。这使得更容易理解程序的流程并以更简洁的方式处理错误。 示例 // 使用 promises 和显式的 .then() 和 .catch() fetchData().then(response {// 处理响应console.log(响应, response);return processData(response);}).then(result {// 处理处理后的数据console.log(处理后的数据, result);}).catch(error {// 处理任何错误console.error(错误, error);});// 使用 async/await async function fetchDataAndProcess() {try {const response await fetchData();console.log(响应, response);const result await processData(response);console.log(处理后的数据, result);} catch (error) {console.error(错误, error);} } fetchDataAndProcess();通过使用明确的 .then() 和 .catch() 链我们必须分别处理异步操作的每个步骤。当涉及多个 promises 时可能会变得复杂从而导致嵌套或链接的 .then() 调用。此外错误处理需要单独的 .catch() 块。 相比之下第二个示例使用 async/await 在更线性和类似同步代码的方式中构建代码。fetchDataAndProcess() 函数标记为 async允许我们在其中使用 await 关键字。这消除了明确的 .then() 和 .catch() 链的需要。 在底层await 关键字会暂停函数的执行使其他任务继续执行比如处理用户输入或动画。JavaScript 引擎会切换到执行其他代码直到由异步函数返回的 promise 解决然后它将恢复异步函数中的其余代码的执行。 Promise 链式编程 Promise 链式编程是 JavaScript 中的一种技术允许你按顺序执行多个异步操作每个操作在前一个操作完成后启动。Promise 链的主要优点是它允许你避免使用嵌套回调来处理异步代码时的 “回调地狱” 或 “回调金字塔”。相反可以编写几乎看起来像同步代码的异步代码从而更容易理解和维护。Promise 链中的每个 then 方法都会接收上一个 promise 解决的结果。此结果可以用来通知链中的下一个步骤。如果链中的 promise 被拒绝后续的 then 方法将被跳过直到找到 catch 方法来处理错误。 fetchData().then(response {console.log(响应, response);return processData(response); // 这返回一个新的 promise}).then(processedData {console.log(处理后的数据, processedData);return furtherProcessing(processedData); // 这返回另一个新的 promise}).then(finalResult {console.log(最终结果, finalResult);}).catch(error {console.error(错误, error);});fetchData、processData 和 furtherProcessing 都是异步函数返回 promises。then 方法被链接在一起每个 then 在前一个 promise 解决后开始其操作。如果链中的任何 promise 被拒绝将调用最后的 catch 方法来处理错误。 理解 .finally 在 JavaScript 中Promises 提供了处理异步操作及其结果的几种强大方法之一就是 .finally 方法。.finally 方法是 Promise 的内置方法它始终会执行无论 promise 是否被解决。这使得它成为放置无论 promise 结果如何都必须运行的清理代码的绝佳位置。 let isLoading true;fetch(https://api.example.com/data).then(response {if (!response.ok) {throw new Error(网络响应不正常);}return response.json();}).then(data console.log(data)).catch(error console.error(错误, error)).finally(() {isLoading false;console.log(获取操作完成);});使用 fetch返回一个 promise从 URL 获取数据。然后我们使用 .then 处理响应并使用 .catch 处理任何错误。最后无论获取操作是否成功都会调用 .finally 以将 isLoading 设置为 false 并在控制台上记录一条消息。 理解异步函数中的 promise 返回 在解决这个问题时可能会派上用场的一个有趣事实是在异步函数中无论你是返回 return new Promise() 还是 return await new Promise()行为通常是相同的。这是因为异步函数始终将返回值包装在 promise 中。然而在某些情况下如错误处理使用 await 可能会有所不同。 思考下面的示例 async function example() {try {return new Promise((resolve, reject) {throw new Error(糟糕);});} catch (err) {console.error(err);} }example(); // 错误不会被捕获它拒绝了 example 返回的 promise。async function example2() {try {return await new Promise((resolve, reject) {throw new Error(糟糕);});} catch (err) {console.error(err);} }example2(); // 错误被捕获example2 返回的 promise 被解决。在 example 函数中try 块不会捕获 promise 引发的错误因为 promise 在引发错误之前就已经返回了。在 example2 中await 会导致函数等待 promise 完成或抛出错误因此它可以捕获 promise 引发的错误。