vue 循环同步请求

在Vue中循环同步请求可以通过使用`async/await`结合`for...of`循环来实现。

首先，确保你的每个请求都是一个返回`Promise`对象的异步函数。例如：

javascript

function fetchData() {

return new Promise((resolve, reject) => { 异步请求逻辑...

resolve(result) 或 reject(error) }); }

然后，创建一个异步函数，在其中使用`for...of`循环来依次发起请求，并等待每个请求的结果。使用`await`关键字来等待每个请求完成，并将结果保存在一个数组中。最后，将保存的结果传递给Vue实例中的数据属性：

javascript

async function fetchAllData() { try {

const result = [];

for(const item of items) {

const data = await fetchData(item); result.push(data); }

this.data = result; } catch(error) { console.error(error); } }

在Vue实例的生命周期函数中调用`fetchAllData`函数，以便在组件加载完成后自动发起请求：

javascript export default { data() { return { data: [] }

},

mounted() {

this.fetchAllData(); },

methods: {

async fetchAllData() { 上述代码 } } }

这样，当组件加载完成后，循环同步请求会依次发起并等待每个请求的结果，然后将结果保存到`data`数据属性中。