Cara menggunakan async/menunggu untuk mengendalikan operasi tak segerak dalam Vue

Cara menggunakan tak segerak/menunggu untuk mengendalikan operasi tak segerak dalam Vue

Dengan pembangunan berterusan pembangunan bahagian hadapan, kami perlu mengendalikan operasi tak segerak yang lebih kompleks dalam Vue. Walaupun Vue sudah menyediakan banyak cara mudah untuk mengendalikan operasi tak segerak, dalam sesetengah kes, kita mungkin perlu menggunakan cara yang lebih mudah dan lebih intuitif untuk mengendalikan operasi tak segerak ini. Pada masa ini, async/menunggu menjadi pilihan yang sangat baik.

Apakah async/menunggu?

Dalam ES2017, async dan tunggu menjadi dua kata kunci baharu. async digunakan untuk mengubah suai fungsi untuk menunjukkan bahawa fungsi itu adalah fungsi tak segerak. Dalam fungsi tak segerak, kita boleh menggunakan await untuk menunggu objek Promise dan kemudian mendapatkan nilai objek tersebut.

Dalam Vue, kami biasanya menggunakan beberapa operasi tak segerak berasaskan Promise, seperti memanggil antara muka untuk mendapatkan data atau memuatkan imej secara tidak segerak, dsb. Menggunakan async/wait membolehkan kami mengendalikan operasi tak segerak ini dengan lebih jelas.

Bagaimana untuk menggunakan async/menunggu?

Sintaks asas untuk menggunakan async/menunggu adalah sangat mudah. Kita hanya perlu mengisytiharkan fungsi sebagai fungsi tak segerak, dan kemudian gunakan await untuk menunggu nilai pulangan objek Promise di mana kita perlu menunggu operasi tak segerak.

Mengambil pemerolehan data sebagai contoh, kami boleh mentakrifkan fungsi tak segerak getArticleById, dan kemudian tunggu nilai pulangan permintaan http dalam badan fungsi:

async function getArticleById(id) {
    const response = await fetch(`/api/articles/${id}`);
    return response.json();
}

Dalam Vue, kami biasanya menggunakan axios untuk memanggil antara muka Dapatkan data. Kita boleh merangkum aksios ke dalam fungsi tak segerak, dan kemudian menggunakan async/menunggu dalam komponen Vue untuk mendapatkan data.

Dengan mengambil senarai blog sebagai contoh, kita boleh mentakrifkan fungsi tak segerak getBlogList:

async function getBlogList() {
    const response = await axios.get('/api/blogs');
    return response.data;
}

Kemudian, dalam komponen Vue, kita boleh menggunakan async/menunggu untuk mendapatkan data dan mengikat data ke dalam templat:

<template>
    <div>
        <div v-for="blog in blogs" :key="blog.id">{{blog.title}}</div>
    </div>
</template>

<script>
    async function getBlogList() {
        const response = await axios.get('/api/blogs');
        return response.data;
    }

    export default {
        data() {
            return {
                blogs: []
            }
        },
        async mounted() {
            this.blogs = await getBlogList();
        }
    }
</script>

Gunakan tak segerak/menunggu untuk mengendalikan berbilang operasi tak segerak

Dalam pembangunan sebenar, kami biasanya menghadapi situasi di mana berbilang operasi tak segerak perlu diproses pada masa yang sama. Sebagai contoh, dalam komponen Vue, kita perlu mendapatkan data daripada antara muka yang berbeza dan kemudian memproses atau memberikannya. Pada masa ini, kita boleh menggunakan kaedah Promise.all() untuk menunggu semua operasi tak segerak diselesaikan sekaligus.

Mengambil artikel dan ulasan sebagai contoh, kita boleh mentakrifkan dua fungsi tak segerak getArticle dan getComments:

async function getArticle(id) {
    const response = await axios.get(`/api/articles/${id}`);
    return response.data;
}

async function getComments(articleId) {
    const response = await axios.get(`/api/articles/${articleId}/comments`);
    return response.data;
}

Kemudian, kita boleh merangkum kedua-dua operasi tak segerak ini ke dalam fungsi tak segerak, menggunakan Promise.all () menunggu kedua-dua operasi selesai pada masa yang sama:

async function getArticleWithComments(articleId) {
    const [ article, comments ] = await Promise.all([
        getArticle(articleId),
        getComments(articleId)
    ]);
    return {
        article,
        comments
    };
}

Dalam komponen Vue, kita boleh menggunakan async/waiit untuk mendapatkan semua data dan mengikat data pada templat:

<template>
    <div>
        <h1>{{article.title}}</h1>
        <p>{{article.content}}</p>
        <ul>
            <li v-for="comment in comments" :key="comment.id">{{comment.content}}</li>
        </ul>
    </div>
</template>

<script>
    async function getArticle(id) {
        const response = await axios.get(`/api/articles/${id}`);
        return response.data;
    }

    async function getComments(articleId) {
        const response = await axios.get(`/api/articles/${articleId}/comments`);
        return response.data;
    }

    async function getArticleWithComments(articleId) {
        const [ article, comments ] = await Promise.all([
            getArticle(articleId),
            getComments(articleId)
        ]);
        return {
            article,
            comments
        };
    }

    export default {
        data() {
            return {
                article: {},
                comments: []
            }
        },
        async mounted() {
            const data = await getArticleWithComments(this.$route.params.articleId);
            this.article = data.article;
            this.comments = data.comments;
        }
    }
</script>

Gunakan try/catch untuk mengendalikan pengecualian

Apabila menggunakan fungsi async, kita juga perlu memberi perhatian kepada pengendalian pengecualian. Apabila ralat berlaku dalam fungsi tak segerak, kita boleh menggunakan pernyataan cuba/tangkap untuk menangkap pengecualian dan mengendalikannya dengan sewajarnya.

Mengambil mendapatkan maklumat pengguna sebagai contoh, kami boleh mentakrifkan fungsi tak segerak getUserInfo. Jika pengguna tidak log masuk, ralat yang tidak dibenarkan akan dikembalikan apabila mendapatkan maklumat pengguna daripada pelayan. Kita boleh menggunakan pernyataan try/catch untuk menangkap ralat dan mengendalikannya dengan sewajarnya:

async function getUserInfo() {
    try {
        const response = await axios.get('/api/user');
        return response.data;
    } catch (error) {
        if (error.response && error.response.status === 401) {
            // 用户未登录
            return null;
        } else {
            // 其它异常
            throw error;
        }
    }
}

Dalam komponen Vue, kita boleh menggunakan async/wait untuk mendapatkan maklumat pengguna dan mengendalikannya dengan sewajarnya berdasarkan nilai pulangan:

<template>
    <div>
        <div v-if="user">{{user.name}}，欢迎回来！</div>
        <div v-else>请先登录</div>
    </div>
</template>

<script>
    async function getUserInfo() {
        try {
            const response = await axios.get('/api/user');
            return response.data;
        } catch (error) {
            if (error.response && error.response.status === 401) {
                // 用户未登录
                return null;
            } else {
                // 其它异常
                throw error;
            }
        }
    }

    export default {
        data() {
            return {
                user: null
            }
        },
        async mounted() {
            this.user = await getUserInfo();
        }
    }
</script>

Ringkasan

Menggunakan async/menunggu membolehkan kami mengendalikan operasi tak segerak dalam Vue dengan lebih jelas. Kita boleh menggunakan async/waiit untuk menunggu nilai pulangan bagi objek Promise dan menggunakan Promise.all() untuk menunggu beberapa operasi tak segerak selesai sekaligus. Pada masa yang sama, apabila menggunakan fungsi tak segerak, anda juga perlu memberi perhatian kepada pengendalian pengecualian Anda boleh menggunakan kenyataan cuba/tangkap untuk menangkap pengecualian dalam operasi tak segerak.

Atas ialah kandungan terperinci Cara menggunakan async/menunggu untuk mengendalikan operasi tak segerak dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!