Vue에서 비동기 작업을 처리하기 위해 async/await를 사용하는 방법

Vue에서 비동기 작업을 처리하기 위해 async/await를 사용하는 방법

프론트 엔드 개발이 지속적으로 발전함에 따라 Vue에서 더욱 복잡한 비동기 작업을 처리해야 합니다. Vue는 이미 비동기 작업을 처리하는 편리한 방법을 많이 제공하지만 경우에 따라 이러한 비동기 작업을 처리하기 위해 더 간단하고 직관적인 방법을 사용해야 할 수도 있습니다. 이때 async/await는 매우 좋은 선택이 됩니다.

비동기/대기란 무엇인가요?

ES2017에서는 async와 wait가 두 개의 새로운 키워드가 되었습니다. async는 함수가 비동기 함수임을 나타내기 위해 함수를 수정하는 데 사용됩니다. 비동기 함수에서는 Wait를 사용하여 Promise 객체를 기다린 다음 객체의 값을 얻을 수 있습니다.

Vue에서는 일반적으로 인터페이스를 호출하여 데이터를 얻거나 이미지를 비동기식으로 로드하는 등 일부 Promise 기반 비동기 작업을 사용합니다. async/await를 사용하면 이러한 비동기 작업을 보다 명확하게 처리할 수 있습니다.

비동기/대기를 어떻게 사용하나요?

async/await를 사용하는 기본 구문은 매우 간단합니다. 함수를 비동기 함수로 선언한 다음 비동기 작업을 기다려야 하는 Promise 개체의 반환 값을 기다리기 위해 대기를 사용하기만 하면 됩니다.

데이터 수집을 예로 들면, 비동기 함수 getArticleById를 정의한 다음 함수 본문에서 http 요청의 반환 값을 기다릴 수 있습니다.

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

Vue에서는 일반적으로 axios를 사용하여 인터페이스를 호출하여 데이터를 얻습니다. . axios를 비동기 함수로 캡슐화한 다음 Vue 구성 요소에서 async/await를 사용하여 데이터를 얻을 수 있습니다.

블로그 목록을 예로 들어 비동기 함수 getBlogList를 정의할 수 있습니다:

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

그런 다음 Vue 구성 요소에서 async/await를 사용하여 데이터를 가져오고 데이터를 템플릿에 바인딩할 수 있습니다.

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

async/await를 사용하여 여러 비동기 작업을 처리하세요

실제 개발에서는 일반적으로 여러 비동기 작업을 동시에 처리해야 하는 상황에 직면하게 됩니다. 예를 들어 Vue 구성 요소에서는 다양한 인터페이스에서 데이터를 가져온 다음 이를 처리하거나 렌더링해야 합니다. 이때 Promise.all() 메서드를 사용하면 모든 비동기 작업이 한 번에 완료될 때까지 기다릴 수 있습니다.

기사와 댓글 가져오기를 예로 들면 두 가지 비동기 함수 getArticle과 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;
}

그런 다음 이 두 가지 비동기 작업을 비동기 함수로 캡슐화하고 Promise.all()을 사용하여 두 가지 작업을 기다릴 수 있습니다. 작업이 동시에 완료됩니다:

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

Vue 구성 요소에서는 async/await를 사용하여 모든 데이터를 가져오고 데이터를 템플릿에 바인딩할 수 있습니다.

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

try/catch를 사용하여 예외를 처리합니다

비동기 함수를 사용할 때 , 우리는 예외 처리에도 주의를 기울여야 합니다. 비동기 함수에서 오류가 발생하면 try/catch 문을 사용하여 예외를 포착하고 그에 따라 처리할 수 있습니다.

사용자 정보 획득을 예로 들면, 비동기 함수 getUserInfo를 정의할 수 있습니다. 사용자가 로그인하지 않은 경우 서버에서 사용자 정보를 가져올 때 승인되지 않은 오류가 반환됩니다. try/catch 문을 사용하여 오류를 포착하고 그에 따라 처리할 수 있습니다:

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

Vue 구성 요소에서 async/await를 사용하여 사용자 정보를 얻고 반환 값에 따라 적절하게 처리할 수 있습니다:

<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

async/await를 사용하면 Vue에서 비동기 작업을 보다 명확하게 처리할 수 있습니다. async/await를 사용하여 Promise 객체의 반환 값을 기다릴 수 있고, Promise.all()을 사용하여 여러 비동기 작업이 한 번에 완료될 때까지 기다릴 수 있습니다. 동시에 비동기 함수를 사용할 때는 예외 처리에도 주의를 기울여야 합니다. try/catch 문을 사용하여 비동기 작업에서 예외를 포착할 수 있습니다.

위 내용은 Vue에서 비동기 작업을 처리하기 위해 async/await를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!