vue3 等待axios请求完成再往下执行

原创

mob649e8158a948 2024-03-26 07:50:38 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e8158a948的原创作品，请联系作者获取转载授权，否则将追究法律责任

Vue3中等待axios请求完成再往下执行

在Vue3中，我们经常会遇到需要在页面加载完成后再执行某些操作的情况，特别是在使用axios等工具进行数据请求时。这时候，我们需要等待axios请求完成后再进行下一步操作，以避免数据未加载完成就对其进行处理而导致错误。

使用axios进行数据请求

首先，我们需要使用axios来进行数据请求。axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js环境。在Vue3中，我们可以使用axios库来进行数据请求。

```javascript
import axios from 'axios';

axios.get('
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error(error);
    });


以上代码示例中，我们使用axios.get方法来进行GET请求，获取

## 等待axios请求完成再往下执行

在Vue3中，我们可以使用async/await来等待axios请求完成后再进行下一步操作。async/await是ES2017引入的新特性，用于简化Promise的使用。

```markdown
```javascript
import axios from 'axios';

async function fetchData() {
    try {
        const response = await axios.get('
        console.log(response.data);
        // 在这里可以进行下一步操作
    } catch (error) {
        console.error(error);
    }
}

fetchData();


以上代码示例中，我们定义了一个async函数fetchData，其中使用了await关键字等待axios.get方法的返回结果。当请求成功时，打印数据并可以进行下一步操作；请求失败时打印错误信息。

## 结合Vue3组件使用

在Vue3中，我们经常会将数据请求和页面展示结合在一起，这时候我们可以将上述代码片段结合到Vue组件中。

```markdown
```javascript
<template>
  <div>
    <div v-if="loading">Loading...</div>
    <div v-else>
      <div v-for="item in data" :key="item.id">{{ item.name }}</div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const loading = ref(true);
    const data = ref([]);

    onMounted(async () => {
      try {
        const response = await axios.get('
        data.value = response.data;
        loading.value = false;
      } catch (error) {
        console.error(error);
      }
    });

    return {
      loading,
      data
    };
  }
};
</script>

在以上代码中，我们使用了Vue3的Composition API来定义了一个组件，其中使用了ref函数来声明响应式数据loading和data，并在onMounted生命周期钩子中进行数据请求。当数据请求完成后，loading设为false，页面展示数据；请求失败时打印错误信息。