vue.js请求数据(axios)
使用npm安装axios
npm install axios --save
在main.js中引入axios
import axios from "axios";
注册axios到vue,注册axios到vue不能使用use方法(Vue.use(axios))
Vue.prototype.$http = axios;//$http为自定义的,Vue.prototype 为注册全局方法 其他任何组件都可以使用
之后就可以到页面使用
执行GET请求
<script type="text/ecmascript-6">
export default {
methods: function () {
this.$http.get('/user', {"id": 123})
.then(res => {
console.log(res.data);
})
.catch(err => {
console.log(err.msg)
})
}
};
</script>
执行POST请求
<script type="text/ecmascript-6">
export default {
methods: function () {
this.$http.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(res => {
console.log(res.data);
})
.catch(err => {
console.log(err.msg);
})
}
};
</script>
一次并发多个请求
function getUserAccount(){
return axios.get('/user');
}
function getUserPermissions(){
return axios.get('/user/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function(acct,perms){
//当这两个请求都完成的时候会触发这个函数,两个参数分别代表返回的结果
}))
vue.js请求数据(axios)的更多相关文章
- vue.js 请求数据
VUE.JS var vm = new Vue({ el:"#list", data:{ gridData: "", }, mounted: function( ...
- vue vue-resource 请求数据
main.js import Vue from 'vue'; import App from './App.vue'; /*使用vue-resource请求数据的步骤 1.需要安装vue-resour ...
- vue的请求数据方式
一,vue-resource请求数据 介绍:vue-resource请求数据方式是官方提供的一个插件 步骤: 1,npm安装 npm install vue-resource --save ...
- VUE实现请求数据
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- vue.js之数据传递和数据分发slot
一.组件间的数据传递 1.父组件获取子组件的数据 *子组件把自己的数据,发送到父级 *vm.$emit(事件名,数据); *v-on: @ 示例用法:当点击send按钮的时候,"111&qu ...
- Vue.js实现数据的双向数据流
众所周知,Vue.js一直使用的是单向数据流的,和angularJs的双向数据流相比,单向数据流更加容易控制.Vue.js允许父组件通过props属性传递数据到子组件.但是有些情况下我们需要在子组件里 ...
- vue.js + ajax 数据加载(纯新手get)
似懂非懂的感觉下撸了一个小demo .(只是单纯的引用vue.js的小demo.)在实践中进步吧! 首先肯定要先看vue的文档,并且知道超超基础的小知识!!!奉上代码: HTML 部分: js的引用: ...
- js请求数据的例子
//es6实现方式 const getData = async ()=> { //同步请求数据 const res1=await this.$http.get("https://www ...
- vue-axios当只调用vue.js又需要axios请求多时
可以将axios方法封装一个函数 (function () { ASK = { get:function (url,data,succFun,errFun) { axios.get(url,{ par ...
随机推荐
- Navicat MySQL安装
1 下载安装包 点击下载安装包 2 解压安装包(解压后有三个文件) 第一个 Crack 是注册文件 第二个 chinese.rar 是汉化包 第三个 navicat_trial.exe 是安装程序 3 ...
- 面试题:struts 拦截器和过滤器
拦截器和过滤器的区别 过滤器是servlet规范中的一部分,任何java web工程都可以使用. 拦截器是struts2框架自己的,只有使用了struts2框架的工程才能用. 过滤器在url-patt ...
- Python 安装 第三方库的安装技巧
Python 安装 第三方库的安装技巧 我的电脑:Windows 10 64位. Python IDE 软件:PyCharm 2016.1.4 Python version : Python 3.5. ...
- RPM验证与数字签名(Verify/Signature)
RPM验证与数字签名(Verify/Signature) 摘自:https://blog.csdn.net/rhel_admin/article/details/32382391 2014年06月19 ...
- Entity Framework Tutorial Basics(28):Concurrency
Concurrency in Entity Framework: Entity Framework supports Optimistic Concurrency by default. In the ...
- Mac安装破解版Office 2016办公软件
一.相关软件 Microsoft Office 2016 For Mac Cracker 破解工具 资源地址(链接:https://pan.baidu.com/s/1Z5CIv-XbxS08MniYN ...
- C语言关键字:auto、static、register、const、volatile 、extern 总结 <转>
auto 这个这个关键字用于声明变量的生存期为自动,即将不在任何类.结构.枚举.联合和函数中定义的变量视为全局变量,而在函数中定义的变量视为局部变量.这个关键字不怎么多写,因为所有的变量默认就是aut ...
- Opera福利谷歌
文章介绍 看到这个文章时候,感觉还可以,之前天行也是酱紫的,但是现在不知道怎么的已经完全用不了了.就试了下这个欧鹏,还可以,朋友有不少需要访问谷歌的,就收藏下了. Opera介绍 Opera浏览器,是 ...
- yzm10的职业生涯
yzm10的进阶之路,记录一点一滴的进步,希望与之共勉. 时间 比赛 战绩 2015.11 NOIP2015全国青少年信息学奥林匹克联赛 提高组二等奖 2017.6 青岛大学“六一八杯”校赛个人赛 冠 ...
- 如何设置Oracle process值
参考链接:http://blog.51cto.com/sunwayle/88870 su - oracle sqlplus system as sysdba; show parameter proce ...