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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
JavaScript如何使用插值实现图像渐变
Jun 28 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
webpack3之loader全解析
2017/10/26 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
Python中操作文件之write()方法的使用教程
2015/05/25 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
在python shell中运行python文件的实现
2019/12/21 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
python yield和Generator函数用法详解
2020/02/10 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
《桃林那间小木屋》教学反思
2014/05/01 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
教代会闭幕词
2015/01/28 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python