妥善解决多个 twttr.widgets.createTweet 承诺

Question

我正在尝试将多条推文添加到已分页的页面。但是，我似乎无法获得 widget.createTweet 承诺以将其元素添加到页面。

这是我简化的 Codepen 示例中的逻辑。

 // increment current page number
 // create next set of tweets
 // append tweet elems to masonry container
 async function paginate() {
     let current = page;
     page = page + 3;
     var tweetIDs = source.slice(current, page);

     // create tweets/widget promises
     const tweetPromises = tweetIDs.map(async id => {
         // create grid element
         let gridEl = document.createElement("div");
         // set masonry class
         gridEl.setAttribute("class", "grid__item");
         // twitter widget.js - get promise
         const response = twttr.widgets.createTweet(id, gridEl, {
             theme: colorScheme,
             dnt: true
         });
         return response;
     });

     // Promise.all over loops
     let results = Promise.all(tweetPromises).then((m) => {
         console.log("then", m); // never happens
     })
     .catch(e => {
         console.log("catch", e.reason);
     });

     console.log(tweetIDs, tweetPromises, results, page);
     // need the resolved tweets first!
     // msnry.appended(newTweetElms);
     // msnry.addItems(newTweetElms);
     // msnry.layout();
 }

Answer 1

这不是您使用 promise 的问题；除非将您传递给 createWidget 的元素添加到 DOM.

，否则 Twitter 不会解决承诺

let gridEl = document.createElement("div");
document.querySelector("#twitter").appendChild(gridEl);

除此之外，除了在 async 函数中使用 then/catch 之外，您的代码看起来还不错。（它有效，但它可能会造成混淆，因为你有两种不同风格的异步行为。）例如，这使得你的最终诊断 console.log 将 always[= 变得不那么明显26=] 显示 results 的 Promise。如果您要记录 await results（并删除您的“从未发生”then 和 catch 记录），您最终的 console.log 将显示您的实际元素数组。

妥善解决多个 twttr.widgets.createTweet 承诺

Properly resolving multiple twttr.widgets.createTweet promises

javascript

twitter

promise

es6-promise