axios使用拦截器实现请求loading

<template>
  <div>
    <button @click="fetch">开始请求</button>
    <div v-if="loading">正在加载...</div>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      loading: false
    };
  },

  created() {
    // 添加请求拦截器
    axios.interceptors.request.use(
      (config) => {
        this.loading = true;
        return config;
      },
      (err) => {
        return Promise.reject(err);
      }
    );

    // 添加响应拦截器
    axios.interceptors.response.use(response => {
      let data = response.data
      this.loading = false;
      if(data.code != 0){
        this.$toast(data.msg)
      }
      console.log(data);
      return data
    },
    error => {
      this.$toast(error)
      return Promise.reject(error)
    }
    )

  },
  
  methods: {
    fetch() {
      let params = {
        username: "xxxxx",
        password: "xxxxx"
      };
      axios
        .post(
          "https://127.0.0.1/login.do",
          qs.stringify(params)
        )
        .then((res) => {
        });
    },
  },
};
</script>