vue axios数据请求get、post方法及实例详解


Posted in Javascript onSeptember 11, 2018

我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法

vue中使用axios方法我们先安装axios这个方法

npm install --save axios

安装之后采用按需引入的方法,哪个页面需要请求数据就在哪个页面里引入一下。

import axios from 'axios'

引入之后我们就可以进行数据请求了,在methods中创建一个方法

methods:{
   getInfo(){
     let url = "url"
     axios.get(url).then((res)=>{
       console.log(res)
     })   
   } 
 }

然后我们在mounted这个生命周期中进行调用

mounted(){
   this.getInfo() 
 }

这样就可以在控制台中查看数据,以上是一个简单的get方法数据请求,下面继续介绍一下post方法的使用,其实post和get的使用没有什么区别只是再加上一个参数就可以了,看一下我们的代码

methods:{
   postInfo(){
     let url = "url"
     let params=new URLSearchParams();//这个方法在axios的官网中有介绍,除了这个方法还有qs这个方法
     params.append("key",index) 
     params.append("key",index)
     axios.post(url,params).then((res)=>{
       console.log(res)
     })
   }  
 }

同样在mounted这个生命周期中进行调用

mounted(){
   this.postInfo()
 }

补充:下面看下axios 数据请求

项目地址:https://github.com/axios/axios

axios是一个基于Promise,同时支持浏览器端和Node.js的HTTP库,常用于Ajax请求。

Vue.js 不像jQuery 或 AngularJS,本身并没有带Ajax方法,因此需要借助插件或第三方HTTP库。

GET和POST请求

axios.get("./package.json",{
     params:{
      userId:"999"
     },
     headers:{
      token:"jack"
     }
    }).then(res=>{
     this.msg = res.data;
    }).catch(function (error) {
     console.log("error init."+error)
    });

POST:

<code class="language-javascript"> axios.post("./package.json",{ 
     userId:"888" 
    },{ 
     headers:{ 
      token:"tom" 
     } 
    }).then(res=>{ 
     this.msg =res.data 
    }).catch(err=>{ 
      console.log(err) 
    })</code>

基于Promise 可以执行多个并发请求:1

function getUserAccount(){
    return axios.get('/user/123')
   }
   function getUserPermissions(){
    return axios.get('/user/12345/premissions')
   }
   axios.all([getUserAccount(),getUserPermissions()])
   .then(axios.spread(function(acct,perms){
     //请求都完时
   }))

也可通过写入配置的形式发起请求:

axios({
  method:'post',
  url:'/user/123',
  data:{
   firstName:'Fred',
   lastName:'Flintstone'
  }
  }).then(function(res){
  console.log(res)
  })

在业务中经常将其封装为实例形式调用,便于通用配置:

// util.js
const instance = axios.create({
 baseURL:"http://jsonplaceholder.typicode.com/",
 timeout:1000,
 headers:{"Content-Type":"application/x-www-form-urlencoded"}
})
export default instance;

在mounted中调用:

Ajax({
    method:'post',
    url:'/package.json',
    data:{
    firstName:'Fred',
    lastName:'flintone'
    }
   }).then(res=>{
     console.log(res.data)
     this.msg = res.data
   })

强求拦截可用于loading..

axios.interceptors.request.use(config=>{
    console.log("require init");
    return config
   })
    axios.interceptors.response.use(response=>{
    console.log("response init");
    return response
   })

总结

以上所述是小编给大家介绍的vue axios数据请求get、post方法及实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
js命名空间写法示例
Dec 18 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
require.js中的define函数详解
Jul 10 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
vue + axios get下载文件功能
Sep 25 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
node.js基础知识汇总
Aug 25 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 Javascript
js监听html页面的上下滚动事件方法
Sep 11 #Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 #Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 #Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 #Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 #Javascript
Webpack之tree-starking 解析
Sep 11 #Javascript
node.js之基础加密算法模块crypto详解
Sep 11 #Javascript
You might like
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
php木马webshell扫描器代码
2012/01/25 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
JavaScript插入动态样式实现代码
2012/02/22 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
详解Python如何生成词云的方法
2018/06/01 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
python生成九宫格图片
2018/11/19 Python
anaconda如何查看并管理python环境
2019/07/05 Python
python实现按行分割文件
2019/07/22 Python
Python count函数使用方法实例解析
2020/03/23 Python
Opencv求取连通区域重心实例
2020/06/04 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
李培根演讲稿
2014/05/22 职场文书
个人简历自荐信
2014/06/26 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP