Vue和Axios的进度条

// main.js
import Vue from 'vue';
import Axios from 'axios';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

// 配置Axios的请求和响应拦截器
Axios.interceptors.request.use(config => {
  NProgress.start(); // 开始进度条
  return config;
}, error => {
  return Promise.reject(error);
});

Axios.interceptors.response.use(response => {
  NProgress.done(); // 结束进度条
  return response;
}, error => {
  return Promise.reject(error);
});

Vue.prototype.$http = Axios;

// App.vue
<template>
  <div>
    <button @click="fetchData">发送请求</button>
  </div>
</template>

<script>
export default {
  methods: {
    fetchData() {
      this.$http.get('/api/data')
        .then(response => {
          // 处理响应数据
        })
        .catch(error => {
          // 处理错误
        });
    }
  }
}
</script>