写了几期的黑话《互联网公司黑话大全》，有个同学问vue2.0的进阶篇算更新完了吗？

让我猛地想起进阶篇在推出预告的时候，大家都提醒前端君，vue-resource已经停止更新了，现在都推荐使用了axios了。

吓得我赶紧打开电脑，赶紧axios学习一番，并很好奇地想看看，这个在vue1.0的时候被官方推荐的 ajax 插件 vue-resource，到底经历了什么，被大家遗弃了。

vue-resource不再更新

我们来看看作者给出的解释，原话如下：

最近团队讨论了一下，Ajax 本身跟 Vue 并没有什么需要特别整合的地方，使用 fetchpolyfill 或是 axios、superagent 等等都可以起到同等的效果，vue-resource 提供的价值和其维护成本相比并不划算，所以决定在不久以后取消对 vue-resource 的官方推荐。

已有的用户可以继续使用， 但以后不再把 vue-resource 作为官方的 ajax 方案。这里可以去掉 vue-resource，文档也不必翻译了。

前端君为大家总结几个关键点：

1.  维护成本与其价值相比不划算

2.  其他插件也能满足同等开发需求

3.  你可以继续用，但不再更新

一起学习axios

既然官方都不再更新vue-resource，并推荐大家使用axios，那我们就一起来学习一下它。

同样我们需要事先安装好它，可以npm和bower安装，我们这里用最简单的cdn加载。

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

CDN安装十分简单，接下来，我们看看它的语法，如何实现数据请求和提交。

get请求

写法如下：

axios.get('/detail?id=10').then(function (res) {
    //成功获取数据
   console.log(res);
 }).catch(function (err) {
    //请求错误
   console.log(err);
 });

使用过jquery的ajax方案的同学，学习axios应该没有任何难度。get请求也可以通过 params 对象传递参数。写法如下：

axios.get('/detail', {
    //参数
   params: {
        id: 10
    }
 }).then(function (res) {
    //成功获取数据
    console.log(res);
 }).catch(function (err) {
    //请求错误
    console.log(err);
 });

相比第一种写法，这种写法的可读性更高，在接口后增加一个对象参数，其中一个属性为params，它的值就是我们要传递的参数id:10。

post请求

写法如下：

//执行post请求
 axios.post('/add', {
    name: '前端君',
    age: 26
 }).then(function (res) {
    //请求成功
  console.log(res);
 }).catch(function (err) {
    //请求失败
  console.log(err);
 });

多个请求并发

除了最常用的get请求和post请求以外，值得一提的是axios提供了一次性并发多个请求的API，使用方法如下：

function getProfile(){
    //请求1
    return axios.get('/profile');
 }
 function getUser(){
    //请求2
    return axios.get('/user');
 }

//并发请求
 axios.all([
    getProfile(),
    getUser()
 ]).then(axios.spread((res1, res2)=>{
    //两个请求现已完成
   console.log(res1);
    console.log(res2);
 }));

我们事先定义了两个方法  getProfile()  和  getUser()  帮我们实现get请求。

在某个业务场景中，我们需要同时产生以上两个get请求，并需要等待它们都请求完毕后再做逻辑处理，你也许会想到回调嵌套，但现在你可以使用axios的并发请求API: axios.all()

当这两个请求都完成的时候会触发 axios.spread() 函数，res1和res2两个参数分别代表返回的结果，相当实用的API。

其实上面我们刚刚讲到的 axios.get()  和  axios.post() 写法是axios给我们提供网络请求的一种别名方式，如果你不喜欢这种写法，完成可以自己通过配置请求参数，实现你想要的请求效果。

举个栗子，对比一下。

手动配置参数，实现一个post请求：

// 发送一个 POST 请求
 axios({
    method: 'post',
    url: '/user',
    data: {
        name: '前端君',
    }
 });

使用post别名写法，实现一个post请求：

//发送一个 POST 请求
 axios.post('/user', {
     name: '前端君',
 })

两种写法均可，大家可以根据自己的喜好和习惯，任选一种。

别名写法是为了大家方便地阅读和编写代码，除了 axios.get() 和 axios.post() ，axios还为所有支持的请求方式提供了别名。

axios.request()

axios.delete( )

axios.head( )

axios.put( )

axios.patch( )

这些别名用法大同小异，大家需要用到的时候，可以查看axios的API文档，也十分简单。

除了以上常用的API以外，axios还提供了其他API，允许开发者配置默认值，拦截器，处理错误和消除请求等操作，十分简单易用，在这里就不一一展开讲述了。

推荐

扩展阅读

原创教程：《ECMAScript 6 系列》

原创教程：《Vue2.0基础系列》

附加习题：《ECMAScript 6 系列》的 2套

附加习题：《Vue2.0基础系列》的 1 套

关于职场

职场感悟：混口饭吃，谈不上喜欢

感到迷茫：我很努力，但依然很迷茫

薪资待遇：那么点工资，能招到人吗？

搞笑黑话：互联网公司黑话，搞笑到爆

资源推荐

其实学好技术并不难，架构师免费分享全网全套最新web前端、JavaScript、HTML5、PHP、数据库……等视频资料！

[总价值超3万！]年薪35万以上的大牛几乎都看了！

加微信: abc15689892 免费领取，由于领取的朋友比较多，所以加微信时一定要备注：555，否则很难通过。