外部js引用vue实例环境的方式 一、定义全局变量 二、引入main.js文件 三、当作参数传入

在使用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)