如何在Ajax请求执行完毕后再运行代码

背景

我们都知道，Ajax是以异步方式从服务器取回数据并在页面上进行动态更新。但有时我们会遇到程序后续的操作依赖于前面Ajax的结果，这时一种简陋的方法是用同步方式发起请求。但这既违背了Ajax的初衷，同时在处理较多数据时也会造成浏览器假死，甚至被浏览器弹窗告警。我认为这种方式只能在获取数据量或发起的Ajax请求数量已知且较少的情况下使用。在ES6的时代，我们可以使用await/async方法来完美解决。

解决方案

首先，考虑这样一个爬虫场景：

1. 我们需要从数据接口A获取一些数据，再从数据接口B获取一些数据。
2. 由于数据量较大，每次从接口获取数据都是分页获取的。当第一次从上述接口取得数据后，即可从返回的数据中得知我们需要的数据被分为了多少页。
3. 当这些数据全部获取完毕后，把所有这些数据导出或者在页面进行展示。
4. 当然，额外地，我们还可以在整个抓取过程开始前给页面加一个遮罩并添加一个进度条，当抓取完毕再移除掉。

以下是代码，注意省略了访问接口A的代码

// program.js
function main(){
    crawlFromWeb();
}
main();

async function crawlFromWeb(){
    // JQuery
    const url = "http://api.btstu.cn/yan/api.php?charset=utf-8&encode=json";
    const details = await $.ajax({
                    url: url,
                    type: "get",
                    contentType: "application/json"
                });

    // fetch
    const details2 = await fetch(url);
    const json = await details2.json();
    console.log(json);

    return details;
}