axios和vue-axios

一、axios

axios是一个库，并不是vue中的第三方插件，使用时不能通过 Vue.use() 安装插件，需要在原型上进行绑定。

安装：

npm install axios -S

引入：

在main.js中引入，并绑定到vue原型上。使用插件时，一般要在入口文件中main.js引入，因为main.js是项目首先运行的文件。

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$http = axios

使用：

this.$axios.get("url").then((res) => {
   console.log(res)
}).catch((err) => {
    console.log(err)
})

//带参数请求
 this.$axios.get("url", { params: { id: id } }).then((res) => {
    console.log(res)
}).catch((err) => {
    console.log(err)
})

二、vue-axios

vue-axios是将axios集成到Vue.js的小包装器，可以像插件一样安装。

安装：

npm install vue-axios -S

引入：

import Vue form 'vue'
import axios from 'axios'
import vueAxios from 'vue-axios'

Vue.use(vueAxios,axios)

使用：

this.axios.get("url").then((res) => {
   console.log(res)
}).catch((err) => {
    console.log(err)
})

//带参数请求
 this.axios.get("url", { params: { id: id } }).then((res) => {
    console.log(res)
}).catch((err) => {
    console.log(err)
})

安装完axios，vue-axios之后可以在Vue项目下面node_modules/_vue-axios/src/index.js中看到vue-axios的源代码。使用 Vue 的插件写法，更符合 Vue 整体生态环境。直接写原型链，感觉有些粗暴了，除非是很底层的实现，否则不太推荐这样写了。

原文：https://www.jianshu.com/p/d65e4d67884a