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 ...
随机推荐
- Angular18 RXJS
1 RX 全称是 Reactive Extensions,它是微软开发并维护的基于 Reactive Programming 范式实现的一套工具库集合:RX结合了观察者模式.迭代器模式.函数式编程来管 ...
- ubuntu16.04 安装opencv3.4
1.去官网下载opencv,在本教程中选用的时opencv3.4.1,其他版本的配置方法异曲同工. 下载链接http://opencv.org/releases.html,选择sources版本 2. ...
- GCD 学习(二)dispatch_queue_create创建Dispatch Queue
摘录于: http://zhuyanfeng.com/archives/3042 dispatch_queue_create 用于创建用户线程队列.可以创建Serial/Concurrent Disp ...
- can基础知识介绍
1.什么是can 2.can的特点 2.物理层特征 我们使用ISO11898标准,物理层特征如图所示 3.帧的种类介绍 实际上有一些帧是有硬件来实现的. 4.数据帧介绍 5.总线仲裁 6.位时序(用于 ...
- sina 接口 根据ip获取各个国家和地区
http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=json&ip=ip
- 《Linux内核设计与实现》读书笔记(六)- 内核数据结构
内核数据结构贯穿于整个内核代码中,这里介绍4个基本的内核数据结构. 利用这4个基本的数据结构,可以在编写内核代码时节约大量时间. 主要内容: 链表 队列 映射 红黑树 1. 链表 链表是linux内核 ...
- 前端文件加载 net::ERR_CONTENT_LENGTH_MISMATCH
前端文章加载的时候有的时候图片不显示,有的时候文件加载不了,检查nginx设置都没有问题,最近才不显示,经检查是nginx服务器磁盘空间已满,将.log文件移动到其他位置 cp /dev/null ...
- UWP&WP8.1 基础控件—Button
Button作为最常用的控件,没有特别难的用法,是一个非常简单,可以很快就掌握的控件. Button 基础用法: 同样,在UWP项目中,可以从工具箱中拖拽到面板中进行使用.也可以使用XAML语法进行编 ...
- datetime问题
DateUtil.format(DateTime.now(), DatePattern.NORM_DATE_PATTERN);. 此方法将现在时间转为yy--mm--dd格式 mysql中日期运算 ...
- 【规律】Gym 100739L Many recursions
给出a,求递归式g(k)的初始条件g(0); 可以看出来g(a) = 1,从后往前推.写个模拟程序可以看出来其实g(0) = 2^a,那么就是一个简单地快速幂取模问题了. #include <c ...