Javascript 具有返回值的多个嵌套axios调用

我正在使用Vue并使用axios进行多次调用，我只是好奇是否有不同的方法。我的代码正在工作，但我不喜欢它的结构方式，我很想得到一些关于这方面的意见

我觉得这太乱了，可能应该有更好的方法：

login: function() {
    this.toggleLoading();

    this.findUser().then(success => {
        if(success) {
            this.validateSomething().then(success => {
                if(success) {
                    this.auth();
                }
            });
        }
    });
}

login: function() {

    this.toggleLoading();

    if(!this.findUser()) {
        return false;
    }

    if(this.validateSomething()) {
        this.auth();
    }
}

findUser

和

validateMething

的结构如下：

findUser: function() {
    return axios
    .post('/find-user', {
        id: this.id
    })
    .then(response => {
        if(response.data.success) {
            return true;
        } else {
            this.addErrors(response.data.message);
            this.toggleLoading();
            return false;
        }
    })
    .catch(this.catchAll)
},

我不想合并

findUser

和

validateMething

函数，因为我希望能够单独使用它们

但基本上，我正在尝试实现类似的目标：

login: function() {
    this.toggleLoading();

    this.findUser().then(success => {
        if(success) {
            this.validateSomething().then(success => {
                if(success) {
                    this.auth();
                }
            });
        }
    });
}

login: function() {

    this.toggleLoading();

    if(!this.findUser()) {
        return false;
    }

    if(this.validateSomething()) {
        this.auth();
    }
}

---

此场景的最佳实践是什么？

您可以使用ES2017中引入的功能。您可以使用关键字

wait

来等待

异步

函数的结果。请查看文档。

您可以使用ES2017中引入的功能。您可以使用关键字

wait

来等待

异步

函数的结果。请检查文档。

像@canbax一样，使用带有关键字wait的

async

方法。请参见下面的小示例。代码将等待进入每个

wait

上的下一行，直到承诺就绪

login: async function() {
    this.toggleLoading();

    const bool = await this.findUser();

    const validated = await this.validateSomething();

    return this.auth();
}

---

与@canbax一样，使用带有关键字wait的

async

方法。请参见下面的小示例。代码将等待进入每个

wait

上的下一行，直到承诺就绪

login: async function() {
    this.toggleLoading();

    const bool = await this.findUser();

    const validated = await this.validateSomething();

    return this.auth();
}

---

您可以使用async/await，但如果您同意承诺，您可以将其清理干净

而不是像这样嵌套期票：

findUser: function() {
    return axios
    .post('/find-user', {
        id: this.id
    })
    .then(response => {
        if(response.data.success) {
            return true;
        } else {
            this.addErrors(response.data.message);
            this.toggleLoading();
            return false;
        }
    })
    .catch(this.catchAll)
},

login:function（）{
这个.toggleLoading（）；
this.findUser（）.then（success=>{
如果（成功）{
this.validateMething（）.then（成功=>{
如果（成功）{
this.auth（）；
}
});
}
});
}

您可以将它们链接起来，如下所示：

login:function（）{
这个.toggleLoading（）；
this.findUser（）
。然后（成功=>{
如果（成功）{
//返回一个承诺将允许您在下面链接下一个
返回此.validateMething（）；
}
//若成功不真实，抛出错误，它将在最后被捕获并跳过其他承诺执行
抛出新错误（'登录失败'）
})
。然后（成功=>{
如果（成功）{
返回这个.auth（）；
}
抛出新错误（'失败的其他原因'）
})
。然后（成功=>{
回归成功
})
.catch（err=>handle（err））//然后处理错误
}

TL；博士

---

承诺（不带async/await）很好，问题是你把它们当作回调来实现，而不是使用

。然后

使用预期的方法，这很容易解决。

你可以使用async/await，但如果你对承诺满意，你可以把它清理干净

而不是像这样嵌套期票：

findUser: function() {
    return axios
    .post('/find-user', {
        id: this.id
    })
    .then(response => {
        if(response.data.success) {
            return true;
        } else {
            this.addErrors(response.data.message);
            this.toggleLoading();
            return false;
        }
    })
    .catch(this.catchAll)
},

login:function（）{
这个.toggleLoading（）；
this.findUser（）.then（success=>{
如果（成功）{
this.validateMething（）.then（成功=>{
如果（成功）{
this.auth（）；
}
});
}
});
}

您可以将它们链接起来，如下所示：

login:function（）{
这个.toggleLoading（）；
this.findUser（）
。然后（成功=>{
如果（成功）{
//返回一个承诺将允许您在下面链接下一个
返回此.validateMething（）；
}
//若成功不真实，抛出错误，它将在最后被捕获并跳过其他承诺执行
抛出新错误（'登录失败'）
})
。然后（成功=>{
如果（成功）{
返回这个.auth（）；
}
抛出新错误（'失败的其他原因'）
})
。然后（成功=>{
回归成功
})
.catch（err=>handle（err））//然后处理错误
}

TL；博士

---

承诺（不使用async/await）很好，问题是您将它们当作回调来实现，而不是使用

。然后
使用预期的方式，这很容易解决。
完美，非常感谢！（您提供的代码中有一个小的输入错误，也许您可以编辑：）异步登录：函数（）{应该是登录：异步函数（）{非常感谢！（您提供的代码中有一个小的输入错误，也许您可以编辑：）异步登录：函数（）{应该是登录：异步函数（）{谢谢！正是我要找的。谢谢！正是我要找的。我决定用async做这件事，但是谢谢你的输入。我决定用async做这件事，但是谢谢你的输入。