Vue的基础部分学完了，但是还缺少几个例子来实际看看到底基于SPA的页面是怎么组织的。不过在之前还有一个要看看，就是axios库，用来发送AJAX请求给后端。 Vue官网的cookbook中有一部分是关于axios如何使用的，结合这个和之前Udemy的视频一起来自学一下。

安装Axios和导入
初步使用axios
使用axios发送请求
全局配置axios
interceptor
axios实例

安装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请求
GET请求
其他请求

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默认设置的