vue.js中for循环如何实现异步方法同步执行

vue.js中for循环实现异步方法同步执行

在项目中有些逻辑或者请求依赖另一个异步请求，常用的方法是回调函数、async  await 。

场景

For循环中异步接口查询返回数据

// 获取图片
        async getImg(data) {
            let glImgArr = data.split(';');
            this.imgData = [];
            console.log(glImgArr, 'glImgArr');
            var ary = [];
            glImgArr.forEach((v, index) => {
                const res = getLandImg({ id: v }).then(_res => {
                    if (_res.code == 200) {
                        return {
                            id: index + 1,
                            imgs: _res.data,
                        };
                    }
                    return '';
                });
                ary.push(res);
            });
            this.imgData = await Promise.all(ary);
        },

原理

async 是“异步”的简写，async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成，并且await 只能出现在 async 函数中，否则会报错。

async作用：

• 当调用一个 async 函数时，会返回一个 Promise 对象。当这个 async 函数返回一个值时，Promise 的 resolve 方法会负责传递这个值；当 async 函数抛出异常时，Promise 的 reject 方法也会传递这个异常值。
• async 函数中可能会有 await 表达式，这会使 async 函数暂停执行，等待 Promise  的结果出来，然后恢复async函数的执行并返回解析值（resolved）。

await作用：

• await 表达式会暂停当前 async function 的执行，等待 Promise 处理完成。若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，继续执行 async function。
• 若 Promise 处理异常(rejected)，await 表达式会把 Promise 的异常原因抛出。另外，如果 await 操作符后的表达式的值不是一个 Promise，则返回该值本身。

vue.js中循环语句的使用方法和相关技巧

概述

在Vue.js的开发中，循环语句是非常常用的语法之一。

通过循环语句，我们可以对数组和对象进行遍历，动态生成重复的HTML元素或执行一系列的操作。

v-for指令

v-for指令是Vue.js中最基本的循环语句指令，它用于遍历数组或对象，并根据每个元素生成对应的HTML元素或执行一段代码。

v-for指令的基本语法如下：

<div v-for="item in list" :key="item.id">{{ item.name }}</div>

在上述代码中，list是一个数组，item是数组中的每个元素。v-for指令会遍历数组中的每个元素，并根据每个元素生成一个

元素。使用:key指令可以为循环生成的每个元素设置唯一的标识符，这样可以提高性能和避免渲染错误。

v-for指令还支持获取当前元素的索引和父级元素的属性。

下面是一个示例：

<div v-for="(item, index) in list" :key="item.id">
  {{ index }} - {{ item.name }}
</div>

在上述代码中，index表示当前元素的索引，item表示当前元素的值。

v-for指令还支持在对象上循环，可以遍历对象的属性和值。

下面是一个示例：

<div v-for="(value, key) in object" :key="key">
  {{ key }}: {{ value }}
</div>

在上述代码中，key表示对象的属性名，value表示对象的属性值。

循环的嵌套

在Vue.js中，可以将循环语句进行嵌套，实现多层级的循环遍历。

例如，可以在一个循环内部再嵌套一个循环，实现二维数组的遍历。

下面是一个示例：

<div v-for="row in matrix" :key="row.id">
  <div v-for="cell in row" :key="cell.id">
    {{ cell.value }}
  </div>
</div>

在上述代码中，matrix是一个二维数组，row表示每一行，cell表示每个单元格。通过嵌套的循环语句，可以逐行逐个单元格地渲染二维数组中的值。

循环的过滤和排序

在使用v-for指令时，还可以对数组进行过滤和排序，从而根据一定的条件来筛选出需要的元素或调整元素的顺序。

下面是一个示例：

<div v-for="item in list.filter(item => item.price > 100)" :key="item.id">
  {{ item.name }} - {{ item.price }}
</div>

在上述代码中，filter()方法用于筛选出价格大于100的元素，并将符合条件的元素进行渲染。

<div v-for="item in sortedList" :key="item.id">
  {{ item.name }} - {{ item.price }}
</div>

在上述代码中，sortedList是一个经过排序的数组。通过对数组进行排序，可以调整元素的顺序，并根据排序后的结果进行渲染。

循环中的事件处理

在循环语句中，经常需要对生成的HTML元素绑定事件处理函数。例如，对于一个列表，可能需要为每个列表项添加点击事件。

在Vue.js中，可以使用循环的索引或唯一标识符作为参数传递给事件处理函数。

下面是一个示例：

<div v-for="(item, index) in list" :key="item.id" @click="handleItemClick(index)">
  {{ item.name }}
</div>

在上述代码中，handleItemClick()方法是一个事件处理函数，它接收索引作为参数，并根据索引执行相应的操作。

心得

循环语句是Vue.js中非常重要的一部分，它可以实现对数组和对象的遍历，动态生成重复的HTML元素或执行一系列的操作。

介绍了Vue.js中循环语句的使用方法和相关技巧，包括v-for指令的基本用法、循环的嵌套、循环的过滤和排序，以及循环中的事件处理。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论