vue.js中for循環(huán)實(shí)現(xiàn)異步方法同步執(zhí)行

在項(xiàng)目中有些邏輯或者請(qǐng)求依賴另一個(gè)異步請(qǐng)求，常用的方法是回調(diào)函數(shù)、async  await 。

場(chǎng)景

For循環(huán)中異步接口查詢返回?cái)?shù)據(jù)

// 獲取圖片
        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 是“異步”的簡(jiǎn)寫，async 用于申明一個(gè) function 是異步的，而 await 用于等待一個(gè)異步方法執(zhí)行完成，并且await 只能出現(xiàn)在 async 函數(shù)中，否則會(huì)報(bào)錯(cuò)。

async作用：

• 當(dāng)調(diào)用一個(gè) async 函數(shù)時(shí)，會(huì)返回一個(gè) Promise 對(duì)象。當(dāng)這個(gè) async 函數(shù)返回一個(gè)值時(shí)，Promise 的 resolve 方法會(huì)負(fù)責(zé)傳遞這個(gè)值；當(dāng) async 函數(shù)拋出異常時(shí)，Promise 的 reject 方法也會(huì)傳遞這個(gè)異常值。
• async 函數(shù)中可能會(huì)有 await 表達(dá)式，這會(huì)使 async 函數(shù)暫停執(zhí)行，等待 Promise  的結(jié)果出來，然后恢復(fù)async函數(shù)的執(zhí)行并返回解析值（resolved）。

await作用：

• await 表達(dá)式會(huì)暫停當(dāng)前 async function 的執(zhí)行，等待 Promise 處理完成。若 Promise 正常處理(fulfilled)，其回調(diào)的resolve函數(shù)參數(shù)作為 await 表達(dá)式的值，繼續(xù)執(zhí)行 async function。
• 若 Promise 處理異常(rejected)，await 表達(dá)式會(huì)把 Promise 的異常原因拋出。另外，如果 await 操作符后的表達(dá)式的值不是一個(gè) Promise，則返回該值本身。

vue.js中循環(huán)語句的使用方法和相關(guān)技巧

概述

在Vue.js的開發(fā)中，循環(huán)語句是非常常用的語法之一。

通過循環(huán)語句，我們可以對(duì)數(shù)組和對(duì)象進(jìn)行遍歷，動(dòng)態(tài)生成重復(fù)的HTML元素或執(zhí)行一系列的操作。

v-for指令

v-for指令是Vue.js中最基本的循環(huán)語句指令，它用于遍歷數(shù)組或?qū)ο螅⒏鶕?jù)每個(gè)元素生成對(duì)應(yīng)的HTML元素或執(zhí)行一段代碼。

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

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

在上述代碼中，list是一個(gè)數(shù)組，item是數(shù)組中的每個(gè)元素。v-for指令會(huì)遍歷數(shù)組中的每個(gè)元素，并根據(jù)每個(gè)元素生成一個(gè)

元素。使用:key指令可以為循環(huán)生成的每個(gè)元素設(shè)置唯一的標(biāo)識(shí)符，這樣可以提高性能和避免渲染錯(cuò)誤。

v-for指令還支持獲取當(dāng)前元素的索引和父級(jí)元素的屬性。

下面是一個(gè)示例：

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

在上述代碼中，index表示當(dāng)前元素的索引，item表示當(dāng)前元素的值。

v-for指令還支持在對(duì)象上循環(huán)，可以遍歷對(duì)象的屬性和值。

下面是一個(gè)示例：

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

在上述代碼中，key表示對(duì)象的屬性名，value表示對(duì)象的屬性值。

循環(huán)的嵌套

在Vue.js中，可以將循環(huán)語句進(jìn)行嵌套，實(shí)現(xiàn)多層級(jí)的循環(huán)遍歷。

例如，可以在一個(gè)循環(huán)內(nèi)部再嵌套一個(gè)循環(huán)，實(shí)現(xiàn)二維數(shù)組的遍歷。

下面是一個(gè)示例：

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

在上述代碼中，matrix是一個(gè)二維數(shù)組，row表示每一行，cell表示每個(gè)單元格。通過嵌套的循環(huán)語句，可以逐行逐個(gè)單元格地渲染二維數(shù)組中的值。

循環(huán)的過濾和排序

在使用v-for指令時(shí)，還可以對(duì)數(shù)組進(jìn)行過濾和排序，從而根據(jù)一定的條件來篩選出需要的元素或調(diào)整元素的順序。

下面是一個(gè)示例：

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

在上述代碼中，filter()方法用于篩選出價(jià)格大于100的元素，并將符合條件的元素進(jìn)行渲染。

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

在上述代碼中，sortedList是一個(gè)經(jīng)過排序的數(shù)組。通過對(duì)數(shù)組進(jìn)行排序，可以調(diào)整元素的順序，并根據(jù)排序后的結(jié)果進(jìn)行渲染。

循環(huán)中的事件處理

在循環(huán)語句中，經(jīng)常需要對(duì)生成的HTML元素綁定事件處理函數(shù)。例如，對(duì)于一個(gè)列表，可能需要為每個(gè)列表項(xiàng)添加點(diǎn)擊事件。

在Vue.js中，可以使用循環(huán)的索引或唯一標(biāo)識(shí)符作為參數(shù)傳遞給事件處理函數(shù)。

下面是一個(gè)示例：

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

在上述代碼中，handleItemClick()方法是一個(gè)事件處理函數(shù)，它接收索引作為參數(shù)，并根據(jù)索引執(zhí)行相應(yīng)的操作。

心得

循環(huán)語句是Vue.js中非常重要的一部分，它可以實(shí)現(xiàn)對(duì)數(shù)組和對(duì)象的遍歷，動(dòng)態(tài)生成重復(fù)的HTML元素或執(zhí)行一系列的操作。

介紹了Vue.js中循環(huán)語句的使用方法和相關(guān)技巧，包括v-for指令的基本用法、循環(huán)的嵌套、循環(huán)的過濾和排序，以及循環(huán)中的事件處理。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論