Vue js，foreach循环内的异步

Question

created () {
    this.test();
},

test : function () {
        axios.get('/api/1', {
            headers : {
                'Access-Control-Allow-Origin' : '*',
                'session' : window.session_id
            }
        }).then((response) => {

            for (const item of response.data) {
                axios.get('/api/2', {
                    headers : {
                        'Access-Control-Allow-Origin' : '*',
                        'session' : window.session_id
                    }
                }).then((response) => {
                    item.subscribers = response.data.filter(o => { return o.status > 0 }).length;
                });
            };

            this.list = response.data;

        }).catch((error) => {
            console.log(error)
        })
    },

<tr v-for="val in list">
    @{{ val.subscribers }}
</tr>

这里我没有在模板中得到 'subscribers'，因为它是在渲染后加载的，或者我不确定。我如何使用 async/await 加载所有数据然后渲染到视图

TIA

Answer 1

问题就在这里

            for (const item of response.data) {
                axios.get('/api/2', {
                    headers : {
                        'Access-Control-Allow-Origin' : '*',
                        'session' : window.session_id
                    }
                }).then((response) => {
                   // This finishes later than
                   // this.list = response.data occurs
                    item.subscribers = response.data.filter(o => { return o.status > 0 }).length;
                });
            };

            this.list = response.data;

你分配 this.list 触发 Vue 重新渲染。只是稍后您将订阅者分配给 Vue cannot detect 的每个单独项目。有很多方法可以正确等待响应。因为您基本上需要以同步方式解决所有问题，所以我建议使用 async/await 语法以提高可读性。我没有测试代码，可能有错字。但我希望它能给你一个想法。


async function test() {
  try {
    const response = await axios.get('/api/1', {
      headers: {
        'Access-Control-Allow-Origin': '*',
        session: window.session_id,
      },
    });

    await Promise.all(response.data.map(async (item) => {
      const subscribers = await axios.get('/api/2', {
        headers: {
          'Access-Control-Allow-Origin': '*',
          session: window.session_id,
        },
      });
      item.subscribers = subscribers.filter((o) => o.status > 0).length;
    }));

    this.list = response.data;
  } catch (error) {
    console.log(error);
  }
}

Vue js，foreach循环内的异步

Vue js, async inside foreach loop

cdn

vuejs2