Vue的基础部分学完了，但是还缺少几个例子来实际看看到底基于SPA的页面是怎么组织的。不过在之前还有一个要看看，就是axios库，用来发送AJAX请求给后端。
Vue官网的cookbook中有一部分是关于axios如何使用的，结合这个和之前Udemy的视频一起来自学一下。
安装Axios和导入
安装很简单：
npm install axios --save
之后导入也很容易，在需要使用的代码块之前导入即可：
import axios from 'axios';
axios官方文档在这里。
配置axios的后端
这里采用了Udemy的课程中的例子，学到了一个新东西，就是google的firebase数据库，创建应用之后，创建实时数据库，然后修改所有允许读写的配置为true即可。
然后就可以使用https://myaxios-66666.firebaseio.com/users.json这样的格式来向其发送请求，其中的myaxios-66666是自己起的应用名称，而users.json中的user表示自定义的文档名称。
然后就可以使用教程里的用户例子来进行AJAX请求发送了。
使用axios发送请求
POST请求
在src/components/auth/signup.vue中，点击按钮的事件代码片段中，先导入axios，然后编写发送请求的代码：
import axios from 'axios';
onSubmit () {
const formData = {
email: this.email,
age: this.age,
password: this.password,
confirmPassword: this.confirmPassword,
country: this.country,
hobbies: this.hobbyInputs.map(hobby => hobby.value),
terms: this.terms
};
axios.post('https://myaxios-66666.firebaseio.com/user-admin.json', formData)
.then(response => {
console.log(response);
})
.catch(error=> {
console.log(error);
});
}
}
}
post方法返回的是一个Premise对象，所以可以用then和catch来进行成功和错误处理。post函数的第一个参数是路径，第二个参数是要发送的数据。还可以传递第三个参数作为配置参数。
填好表单然后点击按钮，可以看到打印出了返回的请求对象，其中的status: 200表示操作成功。返回的对象中的data-name属性是当前这个对象在user文档中的键或者说是id，到Firebase的面板可以很容易的看到结构。
可以多POST几个对象，一会来遍历使用。
GET请求
从Firebase里获取一个User中的对象来看看，写在Dashboard.vue里：
<script>
import axios from 'axios';
export default {
created() {
axios.get('https://myaxios-66666.firebaseio.com/user-admin.json')
.then(res => console.log(res))
.catch(err => console.log(err));
}
}
</script>
刷新页面然后查看控制台，发现收到了响应，其中的data就是用户数据，其中每一个键对应一个JSON数据。
注意，与原生的AJAX请求不同，收到的res.data中，存放的是已经经过JSON编译后形成的JS对象，无需再使用JSON.parse
然后可以遍历出其中的所有USER对象：
<template>
<div id="dashboard">
<h1>That's the dashboard!</h1>
<p>You should only get here if you're authenticated!</p>
<ol>
<li v-for="user in info">{{user}}</li>
</ol>
</div>
</template>
<script>
import axios from 'axios';
export default {
data: function () {
return {
info: ""
}
},
created() {
axios.get('https://myaxios-66666.firebaseio.com/user-admin.json')
.then(res => {
console.log(res);
this.info = res.data;
})
.catch(err => console.log(err));
}
}
</script>
<style scoped>
h1, p {
text-align: center;
}
p {
color: red;
}
</style>
其他请求
其他请求的操作和GET以及POST请求类似，官方文档列出了简单的操作方法：
axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.options(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])
config对象在官方文档查看config对象的配置了，用于更精细粒度的控制。
全局配置axios
现在我们的应用有一个问题，就是每次都在需要的代码前导入axios，一般在Web开发中，发送请求的URL基本固定，只有后边的具体URL路径不同，因此可以设置AXIOS的默认配置：
在main.js中编写如下代码：
import axios from 'axios'; axios.defaults.baseURL = 'https://myaxios-66666.firebaseio.com';
之后在刚才的POST和GET>请求的地方，就可以修改成：
axios.get('/user-admin.json')
axios.post('/user-admin.json')
除此之外常见的配置还有头部信息：
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/json';
第一个常用于发送TOKEN，第二个常用于设置具体的MIME类型，其中红字的部分可以替换成不同的请求类型。
interceptor 拦截器
interceptor需要注册使用，是一个会在发送请求前和得到响应后自动执行的内容。如果很多东西批量操作，都建议写在interceptor中，这些代码也写在main.js中，因为是最早执行的代码：
axios.interceptors.request.use(
config => {
console.log(config);
config.headers['SOMETHING'] = "GUGUU";
return config;
}
);
axios.interceptors.response.use(
config => {
console.log(config);
return config;
}
);
通过查看对象，可以发现更改和HEADER信息，使用这个比较方便。
还可以通过把拦截器放到变量里，然后通过eject方法决定是否使用：
//放到一个变量里并不会影响拦截器生效，因为右边已经先求值过了
const inter1 = axios.interceptors.request.use(
config => {
console.log(config);
config.headers['1'] = "1";
return config;
}
);
const inter2 = axios.interceptors.request.use(
config => {
console.log(config);
config.headers['2'] = "2";
return config;
}
);
const inter3 = axios.interceptors.request.use(
config => {
console.log(config);
config.headers['3'] = "3";
return config;
}
);
//被eject弹出，就不会生效，这里只为HEADER附加上了 2：2 这个键值对
axios.interceptors.request.eject(inter1);
axios.interceptors.request.eject(inter3);
axios实例
有的时候需要向不同地址发请求，统一全局配置比较麻烦，这个时候可以设置axios实例。
实例最好是单独写在JS文件中进行导入，然后使用即可。
具体就看文档吧，实例也是可以进行.defaults默认设置的
