Vue.js2.0基础：用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，允许开发者配置默认值，拦截器，处理错误和消除请求等操作

Vue.js2.0基础：用axios来实现数据请求

猜你喜欢