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 相关文章推荐
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
Dec 30 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 Javascript
Javascript实现单例模式
Jan 24 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
Vue.js中的图片引用路径的方式
Jul 28 Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
详解从Vue-router到html5的pushState
Jul 21 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 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
PHP读取PDF内容配合Xpdf的使用
2012/11/24 PHP
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
PHP多例模式介绍
2013/06/24 PHP
php使用curl访问https示例分享
2014/01/17 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
python+selenium开发环境搭建图文教程
2017/08/11 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
查看python下OpenCV版本的方法
2018/08/03 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
html5 标签
2009/07/16 HTML / CSS
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
外语学院毕业生的自我鉴定
2013/11/28 职场文书
怀念母亲教学反思
2014/04/28 职场文书
给校长的建议书300字
2014/05/16 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
简单的辞职信怎么写
2015/02/28 职场文书