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 ...
随机推荐
- Java线程池拒绝策略
Java线程池拒绝策略 相关资料: 线程池的RejectedExecutionHandler(拒绝策略):http://blog.csdn.net/jgteng/article/details/544 ...
- win10开机时不显示锁屏壁纸
win10开机壁纸存放在此目录下: C:\Users\%username%\AppData\Local\Packages\Microsoft.Windows.ContentDeliveryManage ...
- Dubbo项目入门
Dubbo是一款高性能.轻量级的开源Java RPC框架,它提供了三大核心能力:面向接口的远程方法调用,智能容错和负载均衡,以及服务自动注册和发现. 它的特性如下 面向接口代理的高性能RPC调用 智能 ...
- 2016年第七届蓝桥杯省赛试题(JavaA组)
1.结果填空 (满分3分)2.结果填空 (满分5分)3.结果填空 (满分9分)4.代码填空 (满分11分)5.代码填空 (满分13分)6.结果填空 (满分15分)7.结果填空 (满分19分)8.程序设 ...
- [转]JSP中的编码设置
转至:http://blog.csdn.net/XinVSYuan/article/details/3864853 1. pageEncoding:<%@ page pageEncoding=& ...
- Cyber-Ark spring mvc @autowired
我们帮助中国平安改进他们重要系统的特权帐号密码管理,提供给他们一个“统一的,集中的,安全的”特权帐号密码管理解决方案.完全满足平安信息安全部对“特权帐号生命周期管理”的理解和需求,而且关键组件的高可用 ...
- 预编译对象解决SQL注入问题
- Java50道经典习题-程序43 求奇数个数
题目:求0—7所能组成的奇数个数,奇数中不包含重复数字. public class Prog43 { public static void main(String[] args) { //0-7能组成 ...
- 将Winform程序及dll打包成可执行的exe
使用场景 通常开发的Winform程序,引用了其他类库后,在输出目录下都会产生很多DLL文件,exe执行时必须依赖这些DLL.想要Winform程序只有一个可执行exe文件,又不想打包成安装包,就可以 ...
- php二维数组的某一字段 做分组统计
$country=array_column($order,'country');$countryGP=array_count_values($country);对二维数组的某一字段 做分组统计