使用 axios 发送 ajax 请求

1）vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现。
2） axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护。

axios在github上有详细的API使用说明 https://github.com/axios/axios#example

一、安装

• Using npm:

$ npm install axios

• Using bower:

$ bower install axios

• Using yarn:

$ yarn add axios

• Using jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

• Using unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

二、简单使用案例

const axios = require('axios');

// 发起`get` 请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 请求成功后，这里处理返回数据
    console.log(response);
  })
  .catch(function (error) {
    //出现异常后，这里处理异常数据
    console.log(error);
  })
  .then(function () {
    // 这里 总是会进行，类似 `try`,`catch`,`finally`
  });

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

三、同时发送多个ajax请求

ajax请求为异步请求，有的时候我们的操作需要建立在前面的请求都已经完成的情况下。

function getFirstName() {
  axios.get('/user/12345/firstname');
  ....
}

function getLastName() {
  axios.get('/user/12345/lastname');
  ...
}

axios.all([getFirstName(), getLastName()])
  .then(axios.spread(function (acct, perms) {
    // 现在所有的请求都已经完成
    // 可以进行下一步操作了
  }));

四、在axios请求中修改 / 获取vue实例的数据

我们直接在axios中是无法修改vue实例的数据的。

var vm = new Vue({
    data: {
        name: '',
    },
    methods: {
        get_name() {
            axios({
                method: 'get',
                url: '/user/name/',
            }).then(function (response) {
                this.name = response.data; //这里的 `this` 并不是 vm 实例对象
            })
        }
    },
})

需要提前一步在get_name这个函数中获取this，因为get_name才是vue实例对象的方法。

new Vue({
    data: {
        name: '',
    },
    methods: {
        get_name() {
            var vm_obj = this // 获取 Vue 实例
            axios({
                method: 'get',
                url: '/user/name/',
            }).then(function (response) {
                vm_obj.name = response.data; //这里的 `this` 并不是 vm 实例对象
            })
        }
    },
})

五、axios发送请求的配置参数

我们可以使用以下方式，通过参数设置来完成发送请求，而不是像axios.get()这样高度耦合。

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

• url : '/user/12345/name' 请求的url地址
• method:'get' 请求方法，默认为get
• params:{ID: 12345} url参数，如果这里设置了，则url配置中可以不添加参数
• data: { firstName: 'Fred' } 请求发送的数据，仅仅可以'PUT', 'POST', and 'PATCH'请求中使用
  支持的格式：

- string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
- Browser only: FormData, File, Blob
- Node only: Stream, Buffer

• baseURL: 'https://some-domain.com/api/' 基础url配置。如果url是绝对url路径，则不会使用该配置
• transformRequest: [],传入对请求信息进行处理的函数，可以传入多个

function (data, headers) {
    // Do whatever you want to transform the data

    return data;
  }

• transformResponse:[] 传入对返回信息进行处理的函数，可以传入多个

function (data) {
    // Do whatever you want to transform the data

    return data;
 }

• headers: {'X-Requested-With': 'XMLHttpRequest'} 设置请求头

• responseType: 'json' 返回的结果格式，默认为json

• responseEncoding: 'utf8' response编码，默认为utf8