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 ...
随机推荐
- essential C++中关于面向过程和面向对象的说明
昨天在阅读essential C++中看到了一个关于面向过程和面向对象的区别的例子,感觉挺好的.记录下来.... 这个例子是关于照相机的.照相机有三个性质,一个是控制位置:通常使用3个浮点数据来表示其 ...
- EZOJ #88
传送门 分析 自然想到二分 我们二分一个长度,之后考虑如何线性判断是否合法 我们可以维护一个单调队列表示从i开始的长度为d的区间和的最大值 每次用一段区间和减去它包含的长度为d的区间最大值即可 但是我 ...
- JavaWeb_泛型(Generic)
JDK5以前,对象保存到集合中就会失去其特性,取出时通常要程序员手工进行类型的强制转换,这样不可避免的就会引发程序的一些安全性问题.例如: ArrayList list = new ArrayList ...
- linux linux系统常用设置
linux linux系统常用设置 一.设置开机时开启数字键 修改rc.local文件 命令:vi /etc/rc.local rc.local文件中增加如下代码: INITTY=/dev/tty ...
- 没固定公网 IP 的公司内网实现动态域名解析( 阿里云万网解析 )
情景说明 前段时间应公司需求,需要将内网的服务映射到公网.由于公司使用的是类似家庭宽带的线路,没有固定的公网 IP 地址,所以决定使用域名来完成. 当时有几种方案: 1.花生壳:但是目前需要乱七八糟的 ...
- 正经学C#_布尔运算[布尔值与其布尔运算符]:《c#入门经典》
前面几个章节简述了 C#中得常用得算术运算符.这一章节说布尔值与其布尔运算符. 布尔值在c#中表示方式是 bool类型,这个类型可以储存两个值,true或者false,或者真或者假,可以说0或者1. ...
- Binder学习笔记(三)—— binder客户端是如何组织checkService数据的
起点从TestClient.cpp的main函数发起: int main() { sp < IServiceManager > sm = defaultServiceManager(); ...
- Git解决pull无法操作成功
https://blog.csdn.net/chenjunfengf/article/details/78301957 场景 在git pull的时候,如果本地代码有改动,而服务器上代码也已经被其他人 ...
- echarts图标legend全选功能添加
平时做图表的时候经常用echarts,确实是一款很好用的插件. 开发中遇到了一个问题,在展示的曲线,也就是legend很多的时候,不太好只展示其中几条.配置中是可以默认设置初始化是否展示,但不适用于全 ...
- the swap trick用于锐减过剩容量
1.由于vector的复制构造函数只为被复制的vector分配它所需要的空间,故可以用如下的方式来削减vector v中过剩的容量:vector<int>(v).swap(v) 2.the ...