外部js引用vue实例环境的方式

在使用axios的interceptors时，会产生500问题，有问题时就要给用户警告提示，但是在axios的service是一个独立的js文件不能使用vue的环境（上下文）也就不能有漂亮的警告框，以下是解决问题的方式。

一、定义全局变量

在vue挂载完成时，把vue的实例赋值给全局变量window.$Vue。

//main.js
window.$Vue = new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount('#app')

//service.js
// response interceptor
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    // 在此使用
    window.$Vue.$bvToast.toast(error.toString(), {
      title: `Response Error`,
      variant: 'danger',
      solid: false
    })
    return Promise.reject(error)
  }
)

二、引入main.js文件

在service.js文件中引入main.js文件，前提需要在main.js文件中export default new Vue()。

main.js
export default new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount('#app')

//service.js
// 引入main.js文件
import _this from '../main.js'
// response interceptor
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    // 在此使用
    _this.$bvToast.toast(error.toString(), {
      title: `Response Error`,
      variant: 'danger',
      solid: false
    })
    return Promise.reject(error)
  }
)

三、当作参数传入

在main.js文件引入service.js文件，并调用所需vue实例的函数，vue实例当作参数传入使用。

//service.js
// response interceptor
export default interceptor(_this){
  service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    // 在此使用
    _this.$bvToast.toast(error.toString(), {
      title: `Response Error`,
      variant: 'danger',
      solid: false
    })
    return Promise.reject(error)
  })
}

// main.js
import interceptor from './api/service.js'
const _this = new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount('#app')

interceptor(_this)