360SDN.COM

首页/Vue.js/列表

【vue2.0进阶】用axios来实现ajax的get,post数据请求,简单易用

来源:  2018-03-28 13:58:52    评论:0点击:

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,那我们就一起来学习一下它。

 

同样我们需要事先安装好它,可以npmbower安装,我们这里用最简单的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);
 });

 

 

使用过jqueryajax方案的同学,学习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() 函数,res1res2两个参数分别代表返回的结果,相当实用的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( )

 

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

 

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


为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权