Question

我有React应用，我从后端将代码注入DOM，完成所有请求后，我应该如何执行此代码？我问Vanilla代码，因为它是一种注入DOM的自定义脚本

我的平均API请求，XHR 我试图执行这个

document.querySelector('span[data-attribute="product_cat"]').textContent = document.querySelector('span[data-attribute="product_cat"]').textContent.replace('product cat', 'categories')

在请求期间，只有product_cat div的微调框

我发现一半答案

window.addEventListener('DOMContentLoaded', (event) => {
  let docHeight = document.querySelector('div#page');
  let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

  let observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      if (mutation.type == 'attributes' || mutation.type == "childList" || mutation.type == "characterData" || mutation.type == 'subtree') {
        document.querySelector('span[data-attribute="product_cat"]').textContent = document.querySelector('span[data-attribute="product_cat"]').textContent.replace('product cat', 'categories')
      }
    });
  });

  observer.observe(docHeight, {
    attributes: true,
    childList: true,
    characterData: true,
    subtree: true
  });
});

此版本在chrome上运行良好，但会导致Firefox崩溃，并且在IE上也无法运行

Answer 1

如果您希望在一组请求完成后发生某些事情，我建议使用Promise.all()

示例：

promise1 = fetch('api/some.json')  // Fetch returns a `Promise`
promise2 = fetch('api/some2.json')  // Fetch returns a `Promise`

Promise.all([promise1, promise2])  // [..., ...] accepts promises
.then(function (results) {
    console.log("All promises are done!")
})

完成所有请求后如何执行代码

1 个答案: