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

发布于 2022-09-05 03:42:08 字数 803 浏览 13 评论 0

项目用的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(...)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

策马西风 2022-09-12 03:42:09

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

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

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

回复收藏 0

維他命╮ 2022-09-12 03:42:09

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)

回复收藏 0