Vuejs2 Vueresource等待上一个http请求完成，然后执行下一个请求

我试图加载一个大数据集，并通过在小间隔内获取数据来分解它

就是这样

假设我有1000条记录，我希望以10步为单位获取数据，但仅在当前请求完成时请求下一个10

所以，目前这是我正在做的事情，但它会发出多个http请求，我不知道一个请求何时完成

  processData(){
    this.fetchedtrucks = 0;
    this.dataLoadingCmplete = false;
    this.exportstart = true;
    this.ttatdatatrucks = [];
    let i = 0;
    do {
        const page = (i == 0) ? 0 : (i / (this.paginatorval));
        //send http request

          this.$http.get("v1/data-trucks",
                {
                    from: this.duration_from,
                    to: this.duration_to,
                    page: page,
                    pagination: this.paginatorval,
                    filters: this.filters,
                    only_completed: this.only_completed,
                    non_reg: this.non_reg
                }
            ).then(
                res => {
                    this.ttatdatatrucks = this.ttatdatatrucks.concat(this.getTransformedData(res.ttatdata));
                    this.fetchedtrucks += this.paginatorval;
                    if (this.fetchedtrucks >= this.totalRecords) {
                        this.dataLOadingCompleted();
                    }


                }, err => {
                    this.fetchedtrucks += this.paginatorval;
                    this.errorloadingdata = true;
                }
            )

        i += this.paginatorval;

    } while (i < this.totalRecords);

processData（）{
this.fetchedtrucks=0；
this.dataLoadingCmplete=false；
this.exportstart=true；
this.ttatdatatrucks=[]；
设i=0；
做{
常量页面=（i==0）？0:（i/（this.paginatorval））；
//发送http请求
这个.$http.get（“v1/data trucks”，
{
from:this.duration\u from，
收件人：this.duration_to，
第页：第页，
分页：this.paginatorval，
过滤器：这个。过滤器，
only_completed:this.only_completed，
non_reg：this.non_reg
}
).那么(
res=>{
this.ttatdatatrucks=this.ttatdatatrucks.concat（this.getTransformedData（res.ttatdata））；
this.fetchedtrucks+=this.paginatorval；
如果（this.fetchedtrucks>=this.totalRecords）{
this.dataLOadingCompleted（）；
}
}，err=>{
this.fetchedtrucks+=this.paginatorval；
this.errorloadingdata=true；
}
)
i+=this.paginatorval；
}而（i

上面的工作原理很好，但是当我查看浏览器开发工具时，我可以看到发出了100多个http请求，我期待的是只在当前请求完成时发出下一个http请求

---

如何实现这一点？

之所以会发生这种情况，是因为您的do..while循环正在同时启动所有http请求。它与您的承诺无关，因为它是在外部定义的

在不重构大量代码的情况下，处理此问题的最简单方法是使用JavaScript async/await关键字。我将演示该解决方案，但如果您无法使用这些运算符，那么我将概述如何重构代码以获得所需

首先是简单的方法： 您需要使processData异步，以便可以在其中放置一个Wait运算符。您可以通过在processData声明中添加async关键字来实现这一点，如下所示：

async processData() {...

接下来，您需要删除.then包装器，并使用wait运算符。do..while中的代码如下所示：

     try {
            const res = await this.$http.get("v1/data-trucks",
                {
                    from: this.duration_from,
                    to: this.duration_to,
                    page: page,
                    pagination: this.paginatorval,
                    filters: this.filters,
                    only_completed: this.only_completed,
                    non_reg: this.non_reg
                }
            )
            this.ttatdatatrucks = 
            this.ttatdatatrucks.concat(this.getTransformedData(res.ttatdata));
            this.fetchedtrucks += this.paginatorval;
            if (this.fetchedtrucks >= this.totalRecords) {
                this.dataLOadingCompleted();                    
     } catch (err) {
             this.fetchedtrucks += this.paginatorval;
             this.errorloadingdata = true;
     }

processData(i, complete) {
 if (i >= complete) return;
 this.$http.get()...
 .then(res => {
    //do processing and stuff
    i++
    processData(i, complete)
})

这段代码将使do-while循环需要很长时间才能运行，但它将满足您等待每个http请求完成以执行下一个请求的要求

现在，如果wait操作符不可用，那么您将需要取消do…while循环。我认为您无法轻松完成该操作。我将概述您需要执行的操作

1） 删除do…while循环

2） 将i变量和任何其他适当的变量作为参数添加到processData循环中

3） 从http请求的.then块递归调用processData（）

4） 确保向函数添加适当的逻辑以退出递归

它看起来有点像这样：

     try {
            const res = await this.$http.get("v1/data-trucks",
                {
                    from: this.duration_from,
                    to: this.duration_to,
                    page: page,
                    pagination: this.paginatorval,
                    filters: this.filters,
                    only_completed: this.only_completed,
                    non_reg: this.non_reg
                }
            )
            this.ttatdatatrucks = 
            this.ttatdatatrucks.concat(this.getTransformedData(res.ttatdata));
            this.fetchedtrucks += this.paginatorval;
            if (this.fetchedtrucks >= this.totalRecords) {
                this.dataLOadingCompleted();                    
     } catch (err) {
             this.fetchedtrucks += this.paginatorval;
             this.errorloadingdata = true;
     }

processData(i, complete) {
 if (i >= complete) return;
 this.$http.get()...
 .then(res => {
    //do processing and stuff
    i++
    processData(i, complete)
})

这不是真正的递归，我猜-这只是一个做…虽然伪装成递归，但它将实现同步http请求的结果