axios的拦截器代码应该放到请求代码什么地方？

Question

比如这里有个get请求，代码如下：

<script>
    export default {
        data() {
            return {
                dialogFormVisible: false,
            }
        },
        methods: {
            checkLogin(){
                axios.get('/check-login')
                    .then(response => {
                        console.log(response);
                        this.dialogFormVisible = true; // if is login,run this sentence
                    })
                    .catch(error => {
                        console.log(error);
                        location.href = "/login"; //if is not login ,jump to login page
                    });
            }
        }
    }
</script>

文档中拦截器的代码如下：

axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

问题：
这个拦截器应该放到上面请求代码的什么地方？

Answer 1

说明两点：

• interceptor必须在请求前设置才有效。

• 直接为axios全局对象创建interceptor，会导致全局的axios发出的请求或接收的响应都会被拦截到，所以应该使用axios.create()来创建单独的axios实例。

官方原话：

You can add interceptors to a custom instance of axios.

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

用vue-cli创建了个测试项目，代码如下：

Hello.vue

<script>
import axios from 'axios'

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    getImg () {
      axios.get('https://static.segmentfault.com/v-595f50ca/global/img/logo-b.svg')
        .then((response) => {
          console.log(response)
        }).catch((error) => {
          console.log(error)
        })
    },
    addInterceptors () {
      axios.interceptors.request.use(function (config) {
        // Do something before request is sent
        console.log('开始请求')
        console.log(`请求地址: ${config.url}`)
        return config
      }, function (error) {
        // Do something with request error
        console.log('请求失败')
        return Promise.reject(error)
      })
      axios.interceptors.response.use(function (config) {
        // Do something before request is sent
        console.log('接收响应')
        return config
      }, function (error) {
        // Do something with request error
        console.log('响应出错')
        return Promise.reject(error)
      })
    }
  },
  mounted () {
    this.addInterceptors()
    this.getImg()
  }
}
</script>

控制台输出：