vue2使用axios放送请求，请求过程中添加进度条，请求结束，进度条消失

好的，针对你的问题，我可以提供以下代码示例：

<template>
  <div>
    <button @click="sendRequest">发送请求</button>
    <div v-if="loading" class="progress">
      <div class="progress-bar" role="progressbar" :style="{ width: progress + '%' }"></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      loading: false,
      progress: 0,
    };
  },
  methods: {
    sendRequest() {
      this.loading = true;
      const url = 'your-api-url';
      const config = {
        onUploadProgress: (progressEvent) => {
          this.progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        },
      };
      axios.get(url, config)
        .then((response) => {
          // 请求成功
        })
        .catch((error) => {
          // 请求失败
        })
        .finally(() => {
          this.loading = false;
          this.progress = 0;
        });
    },
  },
};
</script>

<style>
.progress {
  height: 20px;
  margin-top: 20px;
  background-color: #f5f5f5;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: #007bff;
  transition: width 0.6s ease;
}
</style>

以上代码中，当点击发送请求按钮时，`sendRequest` 方法会被触发，在方法内部我们设置了 `loading` 和 `progress` 两个数据，分别用来控制进度条的显示和进度条的进度。同时，我们使用了 `axios` 的 `onUploadProgress` 配置项来监听上传进度，不过这里需要注意的是，`onUploadProgress` 只有在 POST、PUT、PATCH 方法中才有效。如果你需要监听下载进度，则需要使用 `onDownloadProgress` 配置项。

在请求完成后，我们再将 `loading` 和 `progress` 两个数据重置，这样进度条就会消失。