美文网首页
vue-cli 引入axios

vue-cli 引入axios

作者: qishuangyan | 来源:发表于2018-05-09 19:13 被阅读0次

    使用 cnpm 安装 axios

    cnpm install axios --save-dev

    首先在 main.js 中引入 axios

    import axios from 'axios'

    这时候如果在其它的组件中,是无法使用 axios 命令的。所以我们将 axios 改写为 Vue 的原型属性

    Vue.prototype.$http = axios

    在 main.js 中添加了这两行代码之后,就能直接在组件的 methods 中使用 $http命令

    例如

    methods: {

          show()  { 

                this.$http ({

                    method:'get', 

                    url:'/user', 

                     data: {

                          name:'virus'

                      }

                 })

     }

    配置 axios

     1.对于get请求

         axios.get('/user', {  

            params:{     

               name:"virus"

              }    

    })

    2.对于post请求

    axios.post('/user',{ 

         name:"virus"

    })

    3、 一次性并发多个请求

    function getUserAccount (){

      return axios.get ('/user/12345');

    }

    functiongetUserPermissions(){

      return axios.get('/user/12345/permissions');

    }

    axios.all([getUserAccount(),getUserPermissions()])  

      .then(axios.spread(function(acct,perms){

    //当这两个请求都完成的时候会触发这个函数,两个参数分别代表返回的结果

    }))

    4.axios可以通过配置(config)来发送请求

    //发送一个`POST`请求

    axios({    

         method:"POST",  

         url:'/user/1111',   

         data:{      

             name:"virus"

         }

    });

    相关文章

      网友评论

          本文标题:vue-cli 引入axios

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