在我的Vue应用程序中,我使用了一个for循环来迭代字符串数组。 Axios将数组中的每个元素发送到API并接收调用的结果,我将该结果附加到数组中。不幸的是,响应并非总是以正确的顺序到达。有没有办法可以跟踪单个Axios请求,以便以后对响应进行解读?
编辑:根据下面goto1的评论,我已经开始使用Promise.all(),但收到错误消息。代码已更改以反映这一点。使用for循环会导致此错误吗?
这是我的代码:
var app = new Vue({
el: "#app",
data() {
return {
a: "",
b: "Waiting...",
word: "",
array: [],
promises: [],
abc: []
};
},
methods: {
axi: function (p) {
//create array of promises
for (var x = 0; x < this.word.length; x++) {
this.promises.push(axios.get("https://googledictionaryapi.eu-gb.mybluemix.net/?define=" + this.word[x]));
}
//promise.all
Promise.all(this.promises)
},
//returns api call result for each item
multi: function () {
//this.a could be a string like “the quick brown fox”
var word = this.a;
//this.word turns into an array: ["the","quick","brown","fox"]
this.word = word.match(/\b(\w+)\b/g);
//each string is sent to the API
this.axi().then((response) => {
var r = response;
//I am hoping to get something like [“the”, "quick", "brown", "fox"]
console.log(r);
})
//ignore rest of code from here
.catch(function (error) {
console.log("Error! Could not reach the API. " + error);
});
},
//handles other stuff
getA: function () {
if (this.a === "") {
this.b = "Waiting...";
}
this.b = "Retrieving...";
//for another thing
this.array = [];
this.abc = [];
this.word = [];
//function call
this.multi();
}
}
});