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官网