Javascript 如何使 axios 同步
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46347778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make axios synchronous
提问by Warrio
I'm using axios to check if an alias has not already been used by another in the database.
我正在使用 axios 检查数据库中的别名是否尚未被另一个人使用。
Problem: The ajax call doesn't wait for the server response to execute the remaining code.
问题：ajax 调用不等待服务器响应来执行剩余的代码。
The code looks like :
代码如下：
export default {
data () {
return {
id: null,
alias: null,
valid: true,
}
},
methods: {
// triggered by the save button
save () {
this.valid = true;
console.log('before checking');
this.checkUniqueness();
// other validations here
if (this.valid) {
console.log('3. checked valid, can save now');
// save now
}
},
checkUniqueness () {
axios.get('/api/unique/alias', {
params: {
id: this.id,
alias: this.alias,
}
})
.then((response) => {
console.log('2. server response:' + response.data.unique)
this.valid = response.data.unique;
});
},
},
}
The console shows the following result:
控制台显示以下结果：
1. before checking
3. checked valid, can save now
2. server response:false
I cannot move the code of the save()method into .thenbecause I do other validations on the input data such as alpha-numeric characters, minimum of characters...
我无法将save()方法的代码移入，.then因为我对输入数据进行了其他验证，例如字母数字字符、最少字符数...
I was able to delay the 3rd part (if (this.valid) {) using set setTimeoutbut it's not the best solution. what if the server takes more or less than the defined waiting time..
我能够if (this.valid) {使用 set延迟第三部分 ( ) ，setTimeout但这不是最好的解决方案。如果服务器花费的时间多于或少于定义的等待时间怎么办..
QuestionIs there a way to make this call sequential (1, 2, 3) instead of (1, 3, 2)?
问题有没有办法让这个调用按顺序 (1, 2, 3) 而不是 (1, 3, 2) ？
回答by Mark Meyer
You can't (or at least really shouldn't) make it synchronous, so you'll need a different way forward.
你不能（或者至少真的不应该）让它同步，所以你需要一种不同的前进方式。
One idea: return the promise from Axios:
一个想法：从 Axios 返回承诺：
checkUniqueness () {
return axios.get('/api/persons/unique/alias', {
params: {
id: this.id,
alias: this.alias,
}
})
.then((response) => {
console.log('2. server response:' + response.data.unique)
this.valid = response.data.unique;
});
}
and then call then()on it in save():
然后调用then()它save()：
this.checkUniqueness()
.then((returnVal) => {
// other validations here
// save
})
.catch(err => console.log("Axios err: ", err))
You could even do all your checking on one place if you returned the value from Axios's then()rather than setting the flag:
如果您从 Axios 返回值then()而不是设置标志，您甚至可以在一个地方进行所有检查：
.then((response) => {
console.log('2. server response:' + response.data.unique)
return response.data.unique;
});
then in save:
然后在保存：
this.checkUniqueness()
.then((valid) => {
if (valid) // do something
// other validations here
// save
})
回答by Taysky
If you just do what JS docs (mozilla) show you can tread Axios as just another promise. Be careful about making the request synchronous bc it can freeze the UI and the rest of your app.
如果你只是按照 JS 文档 ( mozilla) 所展示的那样做，你可以将 Axios 视为另一个承诺。小心使请求同步，因为它可能会冻结 UI 和应用程序的其余部分。
async save () {
this.valid = true;
console.log('before checking');
const isUnique = await this.checkUniqueness();
console.log(isUnique); // => value waited for and returned from this.checkUniqueness()
// other validations here
if (this.valid) {
console.log('3. checked valid, can save now');
// save now
}
}
