Axios在Vue中的使用
基于Promise的http库，适用于浏览器和node.js。类似Jquery中的AJAX，用于http请求。
Axios的特性：
1.支持Promise API
2.拦截请求和响应（可在请求前和响应前的操作）
3.转换请求数据和响应数据，如加解密等
4.取消请求
5.自动转化JSON数据（Http通过Json.parse()将字符串转化为JSON，而axios自动转换）
6.客户端支持防御XSRF攻击。
兼容性：浏览器中IE可支持axios版本为8及以上，版本过低不支持。
Axios的使用环境为vue-cli 3.x的版本，如果版本太低，请先卸载，卸载命令为 npm uninstall -g vue-cli。 版本合适，无需卸载。
安装
下面三种方法，选择一种即可。第一种任何情况下均可，第二种需要你已安装了淘宝镜像，第三种需要安装了yarn。
npm install axios --save
npm i axios -S
yarn add axios是否安装成功，可通过查看项目文件中的package.json文件 内的dependencies中有axios，有则表示安装成功。
用法
在main.js内导入axios：
import axios from 'axios'然后main.js内添加下方语句：
Vue.prototype.$http = axios;在后面需要使用axios请求时，可以使用下方的形式：
this.$http.get(url)请求方法
axios的请求方法：get, post, put, patch, delete
get: 请求数据
post : 提交数据（表单提交+ 文件上传）
put: 更新数据（所有数据推送到后端）
patch: 更新数据（只将修改的数据推送到后端）
delete: 删除数据
数据格式有form-data和application/json两种。
用法
这里 axios.get('/user?ID=12345') 返回的对象是Promise对象，所以可以调用 .then()/.catch()方法。
axios执行get请求：
const axios = require('axios');
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
// Optionally the request above could also be done as
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}这个是axios官网上的实例，很全面。
get还有一个用法，根据自己的配置生成请求：
axios({
method: 'get',
url: '/data.json', //相对路径，相对于localhost 8080端口
params:{
id:12
}
}).then(res => {
console.log(res);
})axios执行post请求：
axios.post('/user',{
firstName:'friend',
lastName:'Flintstone'
})
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error);
});并发请求
同时进行多个请求，并统一处理回复，使用并发请求需要用到axios.all() 和 axios.spread()两个方法。data.json和city.json为模拟数据。
axios.all(
[
axios.get('/data.json'),
axios.get('/city.json')
]
).then(
axios.spread((dataRes, cityRes) => {
console.log(dataRes, cityRes);
})
)参数配置
下面列出axios 常用的参数配置：
axios.create({
baseURL: http://localhost:8080', //请求的域名，基本地址
timeout: 5000, //请求的超时时长（ms）
url: '/user', // 请求的相对路径
method: get, post, put, patch, delete, // 请求方法
headers: {token:'',}, //请求头
params: {}, //请求连接中的请求参数，必须是一个纯对象
data: {} //请求时请求体数据据
});更多的参数配置可以见axios官网。
参数配置分类
1.axios全局配置
axios.defaults.timeout = 1000; //defaults默认的全局变量
axios.defaults.baseURL = 'http://localhost:8080/';2.axios实例配置（在自己不重新配置时，使用的是全局默认值）
let instance = axios.create();
instance.defaults.timeout = 3000;3.axios请求配置
instance.get('/data.json',{
timeout: 5000
})这三者配置，最后的请求超时时间为5000ms。
三者的优先级为：全局 < 实例 < 请求。
拦截器
定义：在请求或响应前拦截。可分为请求拦截器和响应拦截器。
请求拦截器：
axios.interceptors.request.use(
confog => {
// 在发送请求前做些什么
return config
},err => {
// 在请求错误的时候做些什么
return Promise.reject(err)
}
)响应拦截器：
axios.interceptors.response.use(
res => {
// 请求成功是对响应数据的处理
return res
},err => {
// 响应错误做些什么
return Promise.reject(err)
}
)取消拦截器（了解即可）：
let instance = axios.interceptors.request.use
(config => {
config.headers ={
auth: true
}
return config
})当不需要使用时取消拦截器：
axios.interceptors.request.eject(interceptors);下面是拦截器使用在移动端请求前展示弹窗，请求后关闭弹窗的例子：
// 下面这两个是请求前展示一个弹窗，请求后关闭这个弹窗
let instance_phone = axios.create({})
instance_phone.interceptors.request.use(
config => {
$('#modal').show()
return config
}
)
instance_phone.interceptors.response.use(
res => {
$('#modal').hide()
return res
}
)取消正在运行的HTTP请求
这里需要先安装HTTP，需要在主文件main.js内导入http.js文件，添加Vue.prototype.$Http = Http;
一般取消http请求的情况为：用户在点击后3-5秒内得不到响应，然后直接取消。
let source = axios.CancelToken.source() //创建了一个token
axios.get('/data.json',{
cancalToken: source.token
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
// 取消请求(message可选)
source.cancal('cancel http')这个是axios的整体的了解，欢迎补充！
代码位置：https://github.com/18792627168/axios-vue
node模拟的数据位置：https://github.com/18792627168/axioss/tree/master/axios_node_api-master