【vue2.0进阶】用axios来实现数据请求，简单易用-CSDN博客

本文链接：https://blog.csdn.net/qq_24520459/article/details/103462115

写了几期的黑话《互联网公司黑话大全》，有个同学问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加载。

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);
});