vue-cli 引入axios

2018-05-09  本文已影响0人  qishuangyan

使用 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"

     }

});

上一篇下一篇

猜你喜欢

热点阅读