Comment utiliser async/await pour gérer les opérations asynchrones dans Vue

Comment utiliser async/await pour gérer les opérations asynchrones dans Vue

Avec le développement continu du développement front-end, nous devons gérer des opérations asynchrones plus complexes dans Vue. Bien que Vue propose déjà de nombreuses façons pratiques de gérer les opérations asynchrones, dans certains cas, nous devrons peut-être utiliser une manière plus simple et plus intuitive pour gérer ces opérations asynchrones. À ce stade, async/await devient un très bon choix.

Qu'est-ce que l'async/wait ?

Dans ES2017, async et wait deviennent deux nouveaux mots-clés. async est utilisé pour modifier une fonction pour indiquer que la fonction est une fonction asynchrone. Dans une fonction asynchrone, on peut utiliser wait pour attendre un objet Promise puis obtenir la valeur de l'objet.

Dans Vue, nous utilisons généralement certaines opérations asynchrones basées sur Promise, telles que l'appel d'interfaces pour obtenir des données, ou le chargement asynchrone d'images, etc. L'utilisation de async/await nous permet de gérer plus clairement ces opérations asynchrones.

Comment utiliser async/await ?

La syntaxe de base de l'utilisation de async/await est très simple. Il nous suffit de déclarer une fonction comme fonction asynchrone, puis d'utiliser wait pour attendre la valeur de retour de l'objet Promise où nous devons attendre les opérations asynchrones.

En prenant l'acquisition de données comme exemple, on peut définir une fonction asynchrone getArticleById, puis attendre la valeur de retour de la requête http dans le corps de la fonction :

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

In Vue , nous utilisons généralement axios pour appeler l'interface afin d'obtenir des données. Nous pouvons encapsuler axios dans une fonction asynchrone, puis utiliser async/await dans le composant Vue pour obtenir des données.

En prenant comme exemple l'obtention de la liste des blogs, nous pouvons définir une fonction asynchrone getBlogList :

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

Ensuite, dans le composant Vue, nous pouvons utiliser async/await pour obtenir le data et lier les données au modèle :

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

Utilisez async/await pour gérer plusieurs opérations asynchrones

Dans le développement réel, nous rencontrons généralement plusieurs opérations asynchrones qui doivent être effectuées en même temps, gérer la situation. Par exemple, dans les composants Vue, nous devons obtenir des données de différentes interfaces, puis les traiter ou les restituer. À ce stade, nous pouvons utiliser la méthode Promise.all() pour attendre que toutes les opérations asynchrones soient terminées en même temps.

En prenant comme exemple l'obtention d'articles et de commentaires, nous pouvons définir deux fonctions asynchrones getArticle et 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;
}

Ensuite, nous pouvons encapsuler ces deux opérations asynchrones dans un async Dans le fonction, utilisez Promise.all() pour attendre que les deux opérations se terminent en même temps :

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

Dans le composant Vue, nous pouvons utiliser async/await pour obtenir toutes les données et lier les données au modèle :

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

Utilisez try/catch pour gérer les exceptions

Lors de l'utilisation de fonctions asynchrones, nous devons également faire attention à la gestion des exceptions. Lorsqu'une erreur se produit dans une fonction asynchrone, nous pouvons utiliser l'instruction try/catch pour intercepter l'exception et la gérer en conséquence.

En prenant comme exemple l'obtention d'informations utilisateur, nous pouvons définir une fonction asynchrone getUserInfo. Si l'utilisateur n'est pas connecté, une erreur non autorisée sera renvoyée lors de l'obtention des informations utilisateur auprès du serveur. Nous pouvons utiliser l'instruction try/catch pour capturer l'erreur et la gérer en conséquence :

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

Dans le composant Vue, nous pouvons utiliser async/await pour obtenir des informations sur l'utilisateur et les gérer en conséquence en fonction de la valeur de retour. ：

<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

L'utilisation de async/await nous permet de gérer plus clairement les opérations asynchrones dans Vue. Nous pouvons utiliser async/await pour attendre la valeur de retour de l'objet Promise et utiliser Promise.all() pour attendre que plusieurs opérations asynchrones se terminent en même temps. Dans le même temps, lorsque vous utilisez des fonctions asynchrones, vous devez également faire attention à la gestion des exceptions. Vous pouvez utiliser des instructions try/catch pour intercepter les exceptions dans les opérations asynchrones.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!