vue中数据请求的三种方法
注意请求可能存在跨域问题,需要去配置好
这三种建议使用axios
1.resource
Vue 要实现异步加载需要使用到 vue-resource 库。
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
先导入一个线上cdn的地址,当然还可以去npm安装,但个人觉得不做项目的话使用这种测试方便
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
实现GET请求
<div id="box">
<ul>
<li v-for='item of img'><img :src='item.img' alt=""></li>
</ul>
</div>
<script>
var app = new Vue({
el: '#box',
data: {
img: ''
},
mounted() {
//get请求
this.$http.get('http://localhost:3000/api/banner').then(function(res){
this.img = res.body.data
},function(){
console.log('请求失败处理');
});
}
})
</script>
如果需要传递数据,可以使用 this.$http.get('get.php',{params : jsonData}) 格式,第二个参数 jsonData 就是传到后端的数据。
实现POST请求
<div id="box">
<ul>
<li v-for='item of img'><img :src='item.img' alt=""></li>
</ul>
</div>
<script>
var app = new Vue({
el: '#box',
data: {
img: ''
},
mounted() {
//post请求 需要第三个参数{emulateJSON:true}
this.$http.get('http://localhost:3000/api/banner',{name: '王富贵'},{emulateJSON:true}).then(function(res){
this.img = res.body.data
},function(){
console.log('请求失败处理');
});
}
})
post 发送数据到后端,需要第三个参数 {emulateJSON:true}。
emulateJSON 的作用: 如果Web服务器无法处理编码为 application/json 的请求,你可以启用 emulateJSON 选项。
2.fetch(次方法vue自带的不需要安装其他)
GET方法
这个方法只能在地址栏传参
//get方法 只能在地址栏传参
fetch('http://localhost:3000/api/banner')
.then(res => {
//return 返回给上一层 ,不然下一层用不了
return res.json()
})
.then(data => {
console.log(data)
})
POST方法
var url = 'http://localhost:3000/api/user/loging'
fetch(url, {
method: 'post',
headers: {
//这里是需要去network里面看
'Content-Type': 'application/x-www-form-urlencoded'
},
body: 'tel=xdd212&password=1515'
})
.then(res => {
//return 返回给上一层 ,不然下一层用不了
return res.json()
})
.then(data => {
console.log(data)
})
另一种传参方式
//post 另一种传参方式
fetch(url, {
method: 'post',
headers: {
//看个人习惯
'Content-Type': 'application/json'
},
body: JSON.stringify({
tel: 'xdd212',
password: '1515'
})
})
.then(res => {
//return 返回给上一层 ,不然下一层用不了
return res.json()
})
.then(data => {
console.log(data)
})
3.axios
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
用法和jq很类似
安装或者引入cdn地址 npm i axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
GET请求
<div id="box">
<ul>
<li v-for='item of img'><img :src='item.img' alt=""></li>
</ul>
</div>
<script>
var app = new Vue({
el: '#box',
data: {
img: ''
},
mounted(){
//需要传参的话可以在地址栏后面拼接
axios.get('http://localhost:3000/api/banner',
//还可以这样传参
// {
// params:{
// name:'王富贵'
// }
// }
)
.then(res => {
console.log(res)
})
}
})
</script>
POST请求
<div id="box">
<ul>
<li v-for='item of img'><img :src='item.img' alt=""></li>
</ul>
</div>
<script>
var app = new Vue({
el: '#box',
data: {
img: ''
},
mounted(){
//需要传参的话可以在地址栏后面拼接
axios.post('http://localhost:3000/api/urse/loging',
{
age: 18
name:'王富贵'
}
)
.then(res => {
console.log(res)
})
}
})
</script>
一次执行多个请求
var app = new Vue({
el: '#box',
data: {
img: ''
},
mounted(){
function fn1(){
return axios.get('http://localhost:3000/api/banner')
}
function fn2(){
return axios.get('http://localhost:3000/api/pro')
}
//注意这里必须要使用数组
axios.all([fn1() , fn2()])
//函数里面对应的数字里面的值
.then(axios.spread(function (fn1, fn2) {
console.log(fn1)
}))
}
})
axios
可以自己配置参数
var app = new Vue({
el: '#box',
data: {
img: ''
},
mounted(){
axios({
//注意不写请求方式的话默认是get
method: 'post',
url: 'http://localhost:3000/api/user/loging',
data: {
tel: "xdd212",
password: "1515"
}
})
.then(res => {
console.log(res)
})
}
})
你可以自己定义一个axios
//这里创建一个自定义配置的axios
var init = axios.create({
//这里可配置文件的长路径
baseURL: 'http://localhost:3000/api'
})
// 假设如果很多接口都需要使用 token验证,可以把token信息放在请求头
init.defaults.headers.token = '1231654984561646546565464654654646321654asdasdasd' var app = new Vue({
el: '#box',
data: {
img: ''
},
mounted(){
//下面调用axios的时候就是调用我们自定义创建的
init({
method:'get',
//然后到这下面可以直接写短路径,后期方便维护
url: '/banner'
})
.then(res => {
console.log(res)
})
//此方法也是一样
init.get('/banner')
.then(res => {
console.log(res)
})
}
})
拦截器
请求拦截器和响应拦截器
//请求前
axios.interceptors.request.use(function (config) {
// 可以设置 加载的动画效果 的展示
//这里指的是请求之前做点什么
console.log('正在加载...')
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}) //响应前
axios.interceptors.response.use(function (config) {
// 可以设置 加载的动画效果 的隐藏
//这里指的是请求之前做点什么
console.log('加载完毕')
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}) var app = new Vue({
el: '#box',
data: {
img: ''
},
mounted(){
axios.get('http://localhost:3000/api/banner')
}
})
vue中数据请求的三种方法的更多相关文章
- php发送post请求的三种方法示例
本文分享下php发送post请求的三种方法与示例代码,分别使用curl.file_get_content.fsocket来实现post提交数据,大家做个参考. php发送post请求的三种方法,分别使 ...
- 【MySQL】锁——查看当前数据库锁请求的三种方法 20
MySQL提供了查看当前数据库锁请求的三种方法:1. show full processlist命令 观察state和info列 2. show engine innodb status\G ...
- jQuery中detach&&remove&&empty三种方法的区别
jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...
- IOS开发中数据持久化的几种方法--NSUserDefaults
IOS开发中数据持久化的几种方法--NSUserDefaults IOS 开发中,经常会遇到需要把一些数据保存在本地的情况,那么这个时候我们有以下几种可以选择的方案: 一.使用NSUserDefaul ...
- 三、用Delphi10.3 创建一条JSON数据的第三种方法,非常简洁的写法
一.用Delphi10.3构造一个JSON数据的第三种方法,并格式化输出,代码如下: uses // System.JSON, System.JSON.Types, System.JSON.Write ...
- Android中全屏 取消标题栏,TabHost中设置NoTitleBar的三种方法(转)
Android中全屏 取消标题栏,TabHost中设置NoTitleBar的三种方法http://www.cnblogs.com/zdz8207/archive/2013/02/27/android- ...
- Openerp 中打开 URL 的三种 方法
来自:http://shine-it.net/index.php/topic,8013.0.html 最近总结了,Openerp 中打开 URL 的三种 方法: 一.在form view 添加 < ...
- mysql 中添加索引的三种方法
原文:http://www.andyqian.com/2016/04/06/database/mysqleindex/ 在mysql中有多种索引,有普通索引,全文索引,唯一索引,多列索引,小伙伴们可以 ...
- PHP中数据类型转换的三种方式
PHP中数据类型转换的三种方式 PHP的数据类型转换属于强制转换,允许转换的PHP数据类型有: 1.(int).(integer):转换成整形2.(float).(double).(real):转换成 ...
随机推荐
- LeetCode No.73,74,75
No.73 SetZeroes 矩阵置零 题目 给定一个 m x n 的矩阵,如果一个元素为 0,则将其所在行和列的所有元素都设为 0.请使用原地算法. 示例 输入: [ [1,1,1], [ ...
- 如何用Nginx解决跨域问题
一. 产生跨域的原因 1.浏览器限制 2.跨域 3.XHR(XMLHttpRequest)请求 二. 解决思路 解决跨域有多重,在这里主要讲用nginx解决跨域 1.JSONP 2.nginx代理 3 ...
- 虚拟网卡 TUN/TAP 驱动程序设计原理(经典)
盗用-收藏 简介 虚拟网卡Tun/tap驱动是一个开源项目,支持很多的类UNIX平台,OpenVPN和Vtun都是基于它实现隧道包封装.本文将介绍tun/tap驱动的使用并分析虚拟网卡tun/tap驱 ...
- IP地址结构分类(包括主机号和网络好计算)
IP地址:互联网上的每个接口的唯一标识. 长度:32bit. 五类不同的互联网地址格式: 各类IP地址范围: 点分十进制:32位的地址通常写成四个十进制数,其中每个整数对应一个字节. 主机号和网络的计 ...
- python3下scrapy爬虫(第四卷:初步抓取网页内容之抓取网页里的指定数据延展方法)
上卷中我运用创建HtmlXPathSelector 对象进行抓取数据: 现在咱们再试一下其他的方法,先试一下我得最爱XPATH 看下结果: 直接打印出结果了 我现在就正常拼下路径 只求打印结果: 现在 ...
- 吴裕雄--天生自然python学习笔记:Python3 错误和异常
语法错误 Python 的语法错误或者称之为解析错,是初学者经常碰到的,如下实例 >>>while True print('Hello world') File "< ...
- Android开发之《USB Camera》
SimpleWebCam Source Code:https://bitbucket.org/neuralassembly/simplewebcam/src 1. USB摄像头UVC兼容(如今大部分兼 ...
- 简单了解char和varchar的区别
一.CHAR和 VARCHAR的区别? 1.CHAR有固定的长度,VARCHAR属于可变长度的字符类型. 2.比如,写入内容到CHAR(10)里,如果内容占用的空间不够10,则会用空格字符补足. 二. ...
- Proto3:Techniques
本文描述处理Protocol Buffer常用到的一些设计模式.你也可以给Protocol Buffers discussion group发送设计或使用问题. 流式多条消息 如果你想将多个消息写入到 ...
- JavaScript的封装和继承
提到JavaScript"面向对象编程",主要就是封装和继承,这里主要依据阮一峰及其他博客的系列文章做个总结. 继承机制的设计思想 所有实例对象需要共享的属性和方法,都放在这个对象 ...