Vue请求数据——HTTP库axios

axios是一个基于Promise，同时支持浏览器和Node.js的HTTP库，常用于Ajax请求。
Vue.js不像jQuery或AngularJS，本身并没有携带Ajax方法，因此需要借助插件或第三方HTTP库，axios就是一个不错的选择。

可以通过NPM或CDN的形式来使用axios，以NPM为例，先进行安装：

npm install axios --save

axios提供了多种请求方式，比如直接发起GET或POST请求：

axios.get('/user?ID=12345')
  .then(res=>{
    console.log(res);
  })
  .catch(err=>{
    console.log(err);
  });

axios.post('/user',{
    firstName: 'Fred',
    lastName: 'Flintstone'
  }).then(res=>{
    console.log(res);
  }).catch(err=>{
    console.log(err);
  });

基于Promise，可以执行多个并发请求：

function getUserAccount(){
  return axios.get('/user/12345');
}
function getUserPermissions(){
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
  .then(axios.spread(function(acct,perms){
    //请求都完成时…
  }));

也可以通过写入配置的形式发起请求：

axios({
  method: 'post',
  url: '/user/12345',
  data:{
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then(res=>{
  console.log(res)
});

在业务中，经常将其封装为实例的形式调用，便于做通用配置，例如：

//util.js
const instance=axios.create({
  baseURL: 'https://some-domain.com/api',
  timeout:1000,
  headers:{ 'Content-Type': 'application/x-www-form-urlencoded;'}
});
export default instance;

//index.vue
<template>
  <div></div>
</template>
<script>
  import Ajax from './util.js';
  export default{
    mounted(){
      Ajax({
        method: 'post',
        url: '/user',
        data:{
          firstName: 'Fred',
          lastName: 'Flintstone'
        }
      }).then(res=>{
        console.log(res);
      });
    }
  }
</script>

上文：Vue插件——状态管理与Vuex基本用法

更多内容，欢迎关注微信公众号“让知识成为资产”。