2021-04-13

axios与vue-axios使用及区别

• axios是vue的第三方库，不可以通过Vue.use()安装插件，需要在原型上进行绑定。

axios安装及引用：

npm install --save axios # npm 安装 

import Vue from 'vuevue' //引用vue 
import axios from 'axios' //引用axios 
Vue.prototype.$http = axios //绑定到原型链

axios使用：

axios.get('/user',{

    params:{
                ID:1234,
                name:'小明'
             }

     }).then(function(response){

         console.log(response); 

     }).catch(function(error){

console.log(error) 

});

• vue-axios是将axios集成到vue.js的小包装器，可像插件一样进行安装，引入后，可以通过全局方法vue.use()使用插件。

vue-axios安装及引用：

npm install --save axios vue-axios #安装 ​ 
import Vue from 'vue' 
import axios fron 'axios' 
import VueAxios from 'vue-axios' Vue.use(VueAxios,axios) 

vue-axios使用：

Vue.axios.get(api).then((response) => {console.log(response.data) }) 

this.axios.get(api).then((response) => {console.log(response.data) })

总结：

使用 Vue 的插件写法，更符合 Vue 整体生态环境。直接写原型链，感觉有些粗暴了，除非是很底层的实现，否则不太推荐这样写了。