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中定义对象类别
Dec 22 Javascript
JScript中的undefined和&quot;undefined&quot;的区别
Mar 08 Javascript
JavaScript 高效运行代码分析
Mar 18 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
js子页面获取父页面数据示例
May 15 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
elementui的默认样式修改方法
Feb 23 Javascript
jquery.pagination.js分页使用教程
Oct 23 jQuery
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 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
文件上传类
2006/10/09 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
浅谈node的事件机制
2017/10/09 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
python实现保存网页到本地示例
2014/03/16 Python
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python中的模块和包概念介绍
2015/04/13 Python
Python实现多线程抓取妹子图
2015/08/08 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
tensorflow更改变量的值实例
2018/07/30 Python
python一键去抖音视频水印工具
2018/09/14 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
python 绘制场景热力图的示例
2020/09/23 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
中学生团员自我评价分享
2013/12/07 职场文书
文秘大学生求职信
2014/02/25 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js
Redis基本数据类型String常用操作命令
2022/06/01 Redis