请问如何优雅地在axios中访问vue的实例？

发布于
2017-07-03

项目用的vue-cli，现在我想在axios的拦截器中处理请求中的错误，同时用vue的组件显示出错误。我现在的做法是在index.html中定义了一个全局变量vm，在main.js中初始化Vue实例时，把返回的值赋给window.vm，再在axios的拦截器中用window.vm调用通知组件展示错误信息。但是我觉得这样的方法有点挫，而且不优雅，想请问下各位大神有什么更优雅的方式么？Thx！

示例：

index.html

    <html>
        <body></body>
        <script>
            var vm
        </script>
    </html>

main.js

    // 拦截器
    axios.intercepters.response.use(response => {
        if (!response.result) {
            window.vm.$info(response.message)
        }
    })
   
    // 初始化Vue实例
    window.vm = new Vue(...)

vue.js vue-cli axios

阅读 13.2k

6 个回答

得票最新

chekun

3.4k2220

发布于
2017-07-03

我觉得这样就挺好，如果你不想使用这个new出来的vm的话，也可以如此:

Vue.prototype.$info(response.message);

因为这个 $info, 也就是扩展到Vue对向上方便你在Vue对象里使用的。

tengqingya

417102737

发布于
2017-07-04

更新于
2017-07-04

const getAjax = (params,url,vue)=>{

let userId = vue.$store.state.user.info.user_id

  return service.get(HOST + url, {params: param})
    .then(res => {
      if(res.data.code === 200){
        return res.data.value
      }else {
        console.warn(res)
      }
    })
    .catch(res=>console.warn(res))
}

let userId = vue.$store.state.user.info.user_id就是使用vue访问，将vue通过调用的时候传参过来，
在 vue 组件里面：
getAjax (params,"/api/user",this)