Question

我对常规的异步/等待功能感到满意，但我正在寻找一些更复杂的东西。

我想在页面顶部进行异步AJAX调用，同时进行提取，继续加载页面的其余部分，但是在底部或页面加载后，启动另一个等待的JS函数对于早先完成的初始调用＆amp;使用数据。

动机很简单，对吧？启动异步AJAX调用，同时加载页面的其余部分，然后在加载所有HTML，CSS，图像等时使用数据。或者我忽略了一些简单的事情。明显？

我愿意在必要时依靠Promise，但仍然不清楚如何做到这一点。

感谢您的任何想法...

克里斯

Answer 1

页面顶部：

const pendingResult = fetch(someUrl);

页面结束：

pendingResult.then(result=>console.log("result is:",result));

或者如果您想使用async/await：

async function doSomethingWithResult(){
  const result = await pendingResult;
  //....
}
doSomethingWithResult();

Answer 2

我认为HMR有一个更优雅的解决方案，所以我选择了它，但我发现这也有用，如果有人想要一个不同的方法：

在页面顶部（加载了axios＆amp; jQuery之后）

(async function() {
  var aresponse = await axios.get("/ajax"); //Make the AJAX call at start
  $(function () {
    //Do something with aresponse after page/dom is fully loaded
  });
})();
// Rest of page

这也可以让你把所有的JS组合在一个缩小的JS文件中，你可以把它包含在你的页面顶部，如果这是你的事情......

JavaScript ES7 - 在页面顶部调用异步函数，等待在底部

2 个答案: