axios 调用后数组索引的问题

Question

我正在使用 vue js 和 axios。

这是我正在尝试做的事情：

我的“大纲”数组通常包含 3 到 9 个条目。我想在每个条目上运行一个 axios 请求（运行SecondFunction()），但一次只有运行 1 个请求（等待每条记录被获取，然后再启动另一个记录请求，而不是一次全部。如果其中一个请求失败，则会显示一条错误消息。现在，它可以正常工作，但是一些请求先于其他请求完成，并且我的索引位置在响应中是错误的。

method1(){
   for (const [index, value] of this.splitOutlines.entries()) {
      this.runSecondFunction(value, index);
         }
         }

runSecondFunction(value, index){
       let formData = {
                title: this.blog.value,
                subheading: value
            };
            axios.post('/dashboard/paragraphs', formData).then((response) => {
                this.articles.push({
                    index: index,
                    subheading: response.data.subheading,
                    paragraph: response.data.data.ideas[0],
                });
            }).catch(error => {
                 //
            });
}

知道怎么做吗？

谢谢

Answer 1

一种方法是在出现错误时将错误对象推入数组。

axios.post('/dashboard/paragraphs', formData).then((response) => {
    this.articles.push({
        index: index,
        subheading: response.data.subheading,
        paragraph: response.data.data.ideas[0],
    });
}).catch(error => {
    this.articles.push({ error });
});

或者您可以将文章更改为普通对象而不是数组，并分配给对象的属性而不是推送。

axios.post('/dashboard/paragraphs', formData).then((response) => {
    this.articles[index] = {
        index: index,
        subheading: response.data.subheading,
        paragraph: response.data.data.ideas[0],
    }
}).catch(error => {

Answer 2

如果您真的坚持这些而不是运行同时进行，那么您将不得不做以下两件事之一。你可以让 method1 调用一个 async 函数并在它周围抛出一个 try catch，同时组成一个新数组并 returning 或在其他地方设置它。例如

method1(){
   (async function () {
     const requests = []
     for (const [index, value] of this.splitOutlines.entries()) {
       try {
         const res = await this.runSecondFunction(value, index);
         requests.push(res)
       } catch (e) {
         requests.push(e)
       }
     }
    return requests
    )().then(reqs => {
       // do other stuff with the completed requests.
    })

}

这应该保证请求的顺序得到遵守，并且一次只有一个运行。

否则，您将不得不在 .then 方法中执行某种递归实现。

编辑::

我忘了在你的 runSecondFunction 方法中提到，你需要 return 承诺，所以它应该是这样的：

runSecondFunction(value, index){
    let formData = {
        title: this.blog.value,
        subheading: value
    };
    return axios.post('/dashboard/paragraphs', formData)

}

这样，mehtod1 中的 await 会将文章分配给我所谓的 res（当然，您可以根据需要以任何方式操作此数据）。

但如果您希望它们出现在数组中，请不要处理 runSecondFunction 内的错误。

axios 调用后数组索引的问题

Problem with array index after axios call

javascript

vue.js

vuejs2