vue3 使用axios做接口进度条

在Vue 3中，你可以使用axios来发送HTTP请求并实现接口进度条。下面是一个示例代码：

首先，需要在项目中安装axios依赖：

npm install axios

然后，在你的Vue组件中，可以按照如下方式使用axios并实现接口进度条：

<template>
  <div>
    <button @click="fetchData">发送请求</button>
    <div v-if="loading">加载中...</div>
    <div>{{ data }}</div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      loading: false,
      data: null
    };
  },
  methods: {
    fetchData() {
      this.loading = true;
      axios.get('https://api.example.com/data')
        .then(response => {
          this.data = response.data;
          this.loading = false;
        })
        .catch(error => {
          console.error(error);
          this.loading = false;
        });
    }
  }
};
</script>

在上述示例代码中，我们使用了一个`loading`变量来控制进度条的显示和隐藏。当点击发送请求按钮时，`fetchData`方法会被调用，先将`loading`设置为`true`，然后使用axios发送GET请求获取数据。请求成功时，将返回的数据存储在`data`变量中，并将`loading`设置为`false`。如果请求发生错误，会将错误信息打印出来，并同样将`loading`设置为`false`。

这样就完成了在Vue 3中使用axios实现接口进度条的示例。你可以根据自己的需求进行修改和扩展。