javascript - 将 async/await 与 promise 和 appendChild 结合使用时，应用程序停止工作-6ren

javascript - 将 async/await 与 promise 和 appendChild 结合使用时，应用程序停止工作

转载作者：行者123 更新时间：2023-11-30 09:20:23

25

4

我正在努力更好、更深入地理解 JS，以提高我的技能。因此，我编写了一个演示应用程序，在加载 HTML 文档后添加 JS、CSS 并创建 DOM 元素。我还添加了 async/await 和 promise。当我等待我的 promise 得到解决时(JSFiddle 代码中的第 31 行)，应用程序停止工作。

貌似有点不明白，但是具体是什么，怎么找方向，什么地方，怎么改进，我也不知道。所以，我需要你的建议。

这是 fiddle :

http://jsfiddle.net/k4z86nw3/9/

现在它可以工作了，但是，正如我已经提到的，如果您取消注释第 31 行，

(await wait)();

它将停止工作。

最佳答案

正如在 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise 上展示的那样，它需要在 promise 中调用 resolve 函数。

'use strict';

function initAnimation() {
  (new WOW()).init();
}

function addCSS() {
  let cssStyleSheet = document.createElement('link');
  cssStyleSheet.rel = 'stylesheet';
  cssStyleSheet.href = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css';
  document.head.appendChild(cssStyleSheet);
}

async function addWOW() {
  let wowScriptJS = document.createElement('script');
  wowScriptJS.src = 'https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js';
  wowScriptJS.onload = initAnimation;
  document.body.appendChild(wowScriptJS);
}

(async function run() {

  let res = await fetch('https://dl.dropboxusercontent.com/s/i6ckrkzscn6uuhq/data.json');

  addCSS();
  addWOW();

  let wait = new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('Already waited N sec.');
      resolve();
    }, 1000);
  });

  await wait; // <<< === IF YOU UNCOMMENT THIS LINE, APP WILL STOP WORKING

  let jsonData = await res.json();
  let sections = jsonData.sections;

  function addNewChildToParentDOMElement({
    childDOMElementName,
    cssClasses,
    innerHTML,
    src,
    parentDOMNode
  }) {
    let childDOMElement = document.createElement(childDOMElementName);
    if (cssClasses) {
      childDOMElement.classList.add(...cssClasses);
    }
    if (innerHTML) {
      childDOMElement.innerHTML = innerHTML;
    }
    if (src) {
      childDOMElement.src = src;
    }
    parentDOMNode.appendChild(childDOMElement);
  }

  for (let i = 0; i < sections.length; i++) {
    console.warn('i==', i);
    let newDOMItem = document.createElement('div');

    addNewChildToParentDOMElement({
      childDOMElementName: 'h2',
      cssClasses: ['text-centered'],
      innerHTML: sections[i].title,
      parentDOMNode: newDOMItem
    });

    addNewChildToParentDOMElement({
      childDOMElementName: 'p',
      cssClasses: ['text-centered', 'wow', 'bounceInUp'],
      innerHTML: sections[i].desc,
      parentDOMNode: newDOMItem
    });


    let div = document.createElement('div');
    div.classList.add('img-centered');
    div.classList.add('wow');
    div.classList.add('flipInX');

    addNewChildToParentDOMElement({
      childDOMElementName: 'img',
      src: sections[i].imgURL,
      parentDOMNode: div
    });

    newDOMItem.appendChild(div);

    document.body.appendChild(newDOMItem);
  }

})();

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>aj_test</title>
  <style>
    .text-centered {
      text-align: center;
    }
    
    .img-centered {
      text-align: center;
    }
  </style>
</head>

<body>
</body>

</html>

关于javascript - 将 async/await 与 promise 和 appendChild 结合使用时，应用程序停止工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52171385/

25

4

0

文章推荐： python - SVM与python和CPLEX，加载目标函数的二次部分

文章推荐： java - 如何将多个参数传递给 Xlint java 编译器选项

文章推荐： java - 在运行时添加@XmlTransient 注释(结合自己的注释)

promise - 如何从 promise 中退出 promise ？
如何从 promise 中退出 promise ？ perl6 文档没有提供简单的方法。例如: my $x = start { loop { # loop forever until "qui
sql - Sequelize Promises - Chaining Promises 和 Bluebird Promise.each、Promise.map、Promise.all 等
我的用户 Controller 中有一个索引操作，其中我试图连续做两件事，并且在它们都有机会完成之前不执行所需的 res.json() 方法。我有一个加入用户的友谊加入模型。一列是 friender
javascript - 运行序列 promise 之间的区别是创建一个新的 promise 然后运行和创建所有 promise 然后运行每个 promise
请帮我解释一下为什么日志结果有两种不同: 方式 1:每 1 秒顺序记录一次方式 2:1 秒后记录所有元素。 // Way 1 let sequence = Promise.resolve(); [1
javascript - 如何将 Promise 返回到 Promise.all() 中。 Promise.all() 返回一个 Promise
我的问题很简单。 Promise.all() 方法可以返回 Promise 吗？让我解释一下: function simpleFunction() { let queue = [];
javascript - Promise.all 返回 promise 数组的 promise ，但返回单个 promise 的正确值
我正在使用 Promise 从存储中读取文件并转换为 base64 字符串。我有图像数组，使用 RNFS 读取图像 const promise_Images = _Images.map(async (
javascript - Promise.all([]) 返回已解决的 Promise，但 Promise.race([]) 返回待处理的 Promise。为什么它们不同？
如果使用非空数组调用 Promise.all 或 Promise.race，它们将返回一个待处理的 Promise: console.log(Promise.all([1])); // prints
javascript - Promise.all 中的链式 promise ，没有包装器 Promise
Promise.all 是否可以在没有包装 promise 的情况下返回链的最后一个值？如果不使用 await，它在我的上下文中不起作用没有包装的例子: function sum1(x){ r
javascript - promise 的 promise 到简单的 promise ？
我一直在玩 promise，通常能想出如何处理好它们，但在这种情况下，我不知道如何删除一个 promise-wrapping level。代码如下: let promise2 = promise1.
javascript - 如何嵌套 Promise(Promise.all 内的 Promise.all)
考虑以下嵌套的Promises结构: const getData = async() => { const refs = [{ name: "John33", age: 3
javascript - Promise、Promise/A 和 Promise/A+ 之间的区别
我已经阅读了 Promise/A+ 规范，但据我了解，还有诸如 Promise/A 和 Promise 之类的东西。它们之间有什么区别？ Promise 和 Promise/A 规范也是如此吗？如果是
promise - Promise 对象内外的分号
当我运行以下代码时: my $timer = Promise.in(2); my $after = $timer.then({ say "2 seconds are over!"; 'result'
promise - 为什么我不允许破坏 Promise？
以下简单的 promise 是发誓的，我不允许打破它。 my $my_promise = start { loop {} # or sleep x; 'promise re
promise - 扩展ES6中的 promise
我正在尝试扩展Promise: class PersistedPromise extends Promise { } 然后在派生类上调用静态resolve以直接创建一个已解决的Promise: Per
javascript - 如何在调用另一个 promise 之前检查一个 promise 的结果后返回 promise
我有两个返回 promise 的函数，我独立使用它们作为: getLocal().then(...) 和 getWeb().then(...) 但是现在我遇到了一个奇怪的问题: 1) 我需要第三个
javascript - Promise.all 里面的 Promise.all 对于 Promise 来说是一个很好的实践吗？
我不知道 promise.all 解决方案中的 promise.all 是否是一个好的实践。我不确定。我需要从一组用户获取信息，然后通过此信息响应，我需要发送消息通知。 let userList =
javascript - 为什么在第一个 Promise 解析之后执行链式 Promise 后排队的微任务而忽略链式 Promise？
我一直在尝试使用 queueMicrotask() 函数，但我没有弄清楚当回调是微任务时回调的优先级如何。查看以下代码: function tasksAndMicroTasks() { const
javascript - 为什么在第一个 Promise 解析之后执行链式 Promise 后排队的微任务而忽略链式 Promise？
我一直在尝试使用 queueMicrotask() 函数，但我没有弄清楚当回调是微任务时回调的优先级如何。查看以下代码: function tasksAndMicroTasks() { const
promise - Pharo promise :
今年早些时候，我在 Pharo Smalltalk 参与了一个 promise 项目。这个想法是为了实现以下行为: ([ 30 seconds wait. 4 ]promiseValue )then:
javascript - Bluebird Promise.all 在 Promise 链中间捕获并继续 Promise
大家好，提前感谢您的帮助。下面是我正在尝试做的事情 function1(){ throw some error(); } function2() { // dosomething suc
javascript - Node.js Promises in Promises in Promises 中的嵌套回调未解析
我有以下未解析的代码。f2 解决了，所以我不会添加该代码，它是 f1 我有问题。我调用函数，它到达最里面如果，它调用函数“find”，它执行函数 findId，完美返回 Id，然后执行 editId

首页

博学

6Ren·AI

商城

javascript - 将 async/await 与 promise 和 appendChild 结合使用时，应用程序停止工作