美文网首页
axios全局使用

axios全局使用

作者: 感觉不错哦 | 来源:发表于2018-10-29 12:13 被阅读112次

    vue中我们常用axios进行数据请求

    axios模块在vue开发中如何使用引入,如何注册全局方法

    一般情况下我们采用如下方法

    import axios from 'axios'
     axios({
      url:'http://www.baidu.com',
    })
    .then(res=>{
      console.log(res)
    })
    

    这是vue中比较提倡的引入方法

    但是每个数据请求页面都需要引入axios方法会感到一定的繁琐

    如何引入全局axios呢

    在main.js中 先引入axios

     import axios from 'axios'
    

    好 接下去使用原型的定理 将axios方法设定为Vue对象的方法

     Vue.prototype.axios=axios
    

    这里需要注意的是 此时axios是Vue实例中的方法了 方法必须为对象调用

    所以我们在实例中使用的时候一定要加上this或者是实例对象名

       mounted(){
         this.axios({
              url:'http://www.baidu.com',
              method:'get'
              })
              .then(res=>{
              console.log(res)
            })
           }
    

    此时我们就可以在任何组件里调用axios方法了

    不过还是推荐按需引入axios比较好哦

    相关文章

      网友评论

          本文标题:axios全局使用

          本文链接:https://www.haomeiwen.com/subject/ahkbtqtx.html