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

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

場景

For循環(huán)中異步接口查詢返回數(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 是“異步”的簡寫，async 用于申明一個 function 是異步的，而 await 用于等待一個異步方法執(zhí)行完成，并且await 只能出現(xiàn)在 async 函數(shù)中，否則會報錯。

async作用：

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

await作用：

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

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

概述

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

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

v-for指令

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

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

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

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

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

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

下面是一個示例：

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

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

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

下面是一個示例：

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

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

循環(huán)的嵌套

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

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

下面是一個示例：

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

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

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

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

下面是一個示例：

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

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

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

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

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

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

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

下面是一個示例：

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

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

心得

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

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

總結(jié)

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

最新評論