So verwenden Sie async/await, um asynchrone Vorgänge in Vue abzuwickeln

So verwenden Sie async/await, um asynchrone Vorgänge in Vue abzuwickeln

Mit der kontinuierlichen Weiterentwicklung der Front-End-Entwicklung müssen wir komplexere asynchrone Vorgänge in Vue abwickeln. Obwohl Vue bereits viele praktische Möglichkeiten zur Handhabung asynchroner Vorgänge bietet, müssen wir in einigen Fällen möglicherweise eine einfachere und intuitivere Möglichkeit zur Handhabung dieser asynchronen Vorgänge verwenden. Zu diesem Zeitpunkt ist async/await eine sehr gute Wahl.

Was ist asynchron/warten?

In ES2017 werden „async“ und „await“ zu zwei neuen Schlüsselwörtern. async wird verwendet, um eine Funktion zu ändern, um anzuzeigen, dass es sich bei der Funktion um eine asynchrone Funktion handelt. In einer asynchronen Funktion können wir „await“ verwenden, um auf ein Promise-Objekt zu warten und dann den Wert des Objekts abzurufen.

In Vue verwenden wir normalerweise einige Promise-basierte asynchrone Vorgänge, z. B. das Aufrufen von Schnittstellen zum Abrufen von Daten oder das asynchrone Laden von Bildern usw. Durch die Verwendung von async/await können wir diese asynchronen Vorgänge klarer handhaben.

Wie verwende ich Async/Await?

Die grundlegende Syntax der Verwendung von async/await ist sehr einfach. Wir müssen lediglich eine Funktion als asynchrone Funktion deklarieren und dann mit „await“ auf den Rückgabewert des Promise-Objekts warten, wo wir auf asynchrone Vorgänge warten müssen.

Am Beispiel der Datenerfassung können wir eine asynchrone Funktion getArticleById definieren und dann im Funktionskörper auf den Rückgabewert der http-Anfrage warten:

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

In Vue verwenden wir normalerweise Axios, um die Schnittstelle zum Abrufen von Daten aufzurufen . Wir können Axios in eine asynchrone Funktion kapseln und dann async/await in der Vue-Komponente verwenden, um Daten abzurufen.

Nehmen Sie als Beispiel das Abrufen der Blog-Liste. Wir können eine asynchrone Funktion getBlogList:

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

definieren. Dann können wir in der Vue-Komponente async/await verwenden, um die Daten abzurufen und die Daten an die Vorlage zu binden:

<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>

Verwenden Sie async/await, um mehrere asynchrone Vorgänge zu verarbeiten.

In der tatsächlichen Entwicklung stoßen wir normalerweise auf Situationen, in denen mehrere asynchrone Vorgänge gleichzeitig verarbeitet werden müssen. In Vue-Komponenten müssen wir beispielsweise Daten von verschiedenen Schnittstellen abrufen und diese dann verarbeiten oder rendern. Zu diesem Zeitpunkt können wir die Methode Promise.all() verwenden, um darauf zu warten, dass alle asynchronen Vorgänge auf einmal abgeschlossen werden.

Am Beispiel des Abrufens von Artikeln und Kommentaren können wir zwei asynchrone Funktionen getArticle und getComments definieren:

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;
}

Dann können wir diese beiden asynchronen Vorgänge in eine asynchrone Funktion kapseln und Promise.all() verwenden, um auf die beiden zu warten Der Vorgang wird gleichzeitig abgeschlossen:

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

In der Vue-Komponente können wir async/await verwenden, um alle Daten abzurufen und die Daten an die Vorlage zu binden:

<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>

Verwenden Sie try/catch, um Ausnahmen zu behandeln

Bei Verwendung asynchroner Funktionen , wir Sie müssen auch auf die Ausnahmebehandlung achten. Wenn in einer asynchronen Funktion ein Fehler auftritt, können wir die try/catch-Anweisung verwenden, um die Ausnahme abzufangen und entsprechend zu behandeln.

Am Beispiel des Abrufens von Benutzerinformationen können wir eine asynchrone Funktion getUserInfo definieren. Wenn der Benutzer nicht angemeldet ist, wird beim Abrufen der Benutzerinformationen vom Server ein nicht autorisierter Fehler zurückgegeben. Wir können die try/catch-Anweisung verwenden, um den Fehler abzufangen und ihn entsprechend zu behandeln:

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;
        }
    }
}

In der Vue-Komponente können wir async/await verwenden, um Benutzerinformationen abzurufen und diese basierend auf dem Rückgabewert entsprechend zu behandeln:

<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>

Summary

Durch die Verwendung von async/await können wir asynchrone Vorgänge in Vue klarer handhaben. Wir können async/await verwenden, um auf den Rückgabewert des Promise-Objekts zu warten, und Promise.all() verwenden, um darauf zu warten, dass mehrere asynchrone Vorgänge gleichzeitig abgeschlossen werden. Gleichzeitig müssen Sie bei der Verwendung asynchroner Funktionen auch auf die Ausnahmebehandlung achten. Sie können Try/Catch-Anweisungen verwenden, um Ausnahmen in asynchronen Vorgängen abzufangen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie async/await, um asynchrone Vorgänge in Vue abzuwickeln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!