Vue2.0 心法 ==> 第五层：vue2.0 中的axios

好久没写博客了，今天突发奇想，写一篇（虽然没什么逻辑关系..）。
最近做车载后台系统，用到了vue2.0，里面的ajax请求，选用的axios，这个单词我我不知道怎么发音，估计是a ke si ou si吧，类似这样的。
vue官方人员说，2.0后将不再继续维护vue-resource了，并推荐大家使用 axios ，同时为了显得高大上，我就用了axios。

1.同样，需要先安装axios。

npm install axios --save

2.页面引用

安装好了axios，就可以开始用啦。为了方便管理，我新建了一个api.js的文件，专门用来存放API接口，放在了router文件夹。所以，我的文件结构是这样的：

然后在main.js里面引入这个api.js就可以啦。

import './router/api.js'

3.编写API

a.先引入axios

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

axios依赖于vue，所以前面两句就不说了。后面这个qs，是axios自带的一个格式化数据工具，后面我们将用它来将请求数据转为json字符串。

b.axios基础配置

axios.defaults.baseURL = 'XXXXXXX'  // 设置请求地址，后面的接口都将基于这个基本请求地址

// 设置请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.headers.patch['Content-Type'] = 'application/x-www-form-urlencoded'

//如果在发送来自其他域的XMLHttpRequest请求之前，未设置withCredentials 为true，那么就不能为它自己的域设置cookie值。而通过设置withCredentials 为true获得的第三方cookies，将会依旧享受同源策略
//axios 默认不发送cookie，这样设置可以保存登陆成功的token和cid在cookie中
axios.defaults.withCredentials = true

//拦截器，将请求数据在发送前进行拦截，将其转化为json字符串在发送
axios.interceptors.request.use(function (config) {
    if (config.method !== 'get') {
        config.data = qs.stringify(config.data)
    }
    return config
})

4.举个栗子

// API接口
const API_LOGIN = 'signIn' 

我们在vue的原型链上扩展了一个对象，里面包含各种接口函数

Vue.prototype.$ajax = {
    autoService: {
        login (params) {
            return axios({
                method: 'POST',
                url: API_LOGIN,
                cache: true,
                data: params
            })
        },
    }
}

这样使用

 methods: {
   login () {
      let params = {
          cid: md5(String(new Date().getTime() + Math.random())),
          email: this.email,
          password: this.password
      }
      this.$ajax.autoService
          .login(params)
          .then((res) => {
              // 成功回调
          }, (res) => {
              // 失败回调
          })
     },
}

最后，上一个官方文档：axios官网