vue-axios 实现数据请求

发表于 | 分类于 | | 阅读次数 
vue-resource不再更新
我们来看看作者给出的解释，原话如下：

最近团队讨论了一下，Ajax 本身跟 Vue 并没有什么需要特别整合的地方，
使用 fetchpolyfill 或是 axios、superagent 等等都可以起到同等的效果，
vue-resource 提供的价值和其维护成本相比并不划算，所以决定在不久以后取消对 vue-resource 的官方推荐。
已有的用户可以继续使用， 但以后不再把 vue-resource 作为官方的 ajax 方案。这里可以去掉 vue-resource，
文档也不必翻译了。

一起学习axios

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


get请求

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


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

1
2
3
4
5
6
7
8
9
10
11
12
axios.get('/detail', {
   //参数
  params: {
       id: 10
   }
}).then(function (res) {
   //成功获取数据
   console.log(res);
}).catch(function (err) {
   //请求错误
   console.log(err);
});
相比第一种写法，这种写法的可读性更高，在接口后增加一个对象参数，其中一个属性为params，它的值就是我们要传递的参数id:10。

post请求

1
2
3
4
5
6
7
8
9
10
11
//执行post请求
axios.post('/add', {
   name: '前端君',
   age: 26
}).then(function (res) {
   //请求成功
 console.log(res);
}).catch(function (err) {
   //请求失败
 console.log(err);
});
多个请求并发

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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请求：

1
2
3
4
5
6
7
8
9
10
11
12
13
// 发送一个 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，允许开发者配置默认值，拦截器，处理错误和消除请求等操作，
十分简单易用，在这里就不一一展开讲述了。


----摘自前端君教程