<template>
  <div id="app">
    <h1>axios拦截器</h1>
    <button @click="handleClick">按钮</button>
    <p>{{title}}</p>
    <div v-if="loading">loading...</div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      title: '',
      loading: false
    }
  },
  methods: {
    handleClick() {
      axios.get('https://jsonplaceholder.typicode.com/todos/1').then((res) => {
        this.title = res.data.title
      })
    }
  },
  created() {
    axios.interceptors.request.use((config) => {
      this.loading = true
      return config
    })
    axios.interceptors.response.use((config) => {
      this.loading = false
      return config
    })
  }
}
</script>