html中vue数据请求的三种方法
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.post(‘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’)
}
})
html中vue数据请求的三种方法相关推荐
- mysql double 转 字符串_没想到!在MySQL数据库中的数据有这三种类型!
MySQL数据库是一个或多个数据列构成二维表,它的每一种数据列都有特定类型,而类型决定MySQL是怎么看待该列数据,如果把整型数值存放到字符类型的列中,MySQL则会把它当成字符串来处理. MySQL ...
- JavaScript 循环中调用异步函数的三种方法,及为什么 forEach 无法工作的分析
JavaScript 循环中调用异步函数的三种方法,及为什么 forEach 无法工作的分析 业务分析 初版的问题 解决方案 传统的 for 循环 不使用 for 循环的解决方案 分析 forEach ...
- Struts2中action接收参数的三种方法及ModelDriven跟Preparable接口结合JAVA反射机制的灵活用法...
Struts2中action接收参数的三种方法及ModelDriven跟Preparable接口结合JAVA反射机制的灵活用法 www.MyException.Cn 发布于:2012-09-15 ...
- php发送post请求的三种方法
这篇文章主要介绍了php发送post请求的三种方法,分别使用curl.file_get_content.fsocket来实现post提交数据,需要的朋友可以参考下 class Request{ pub ...
- mysql在计算机管理中的路径怎么修改_Rstudio中修改工作路径的三种方法
原文链接: Rstudio中修改工作路径的三种方法_weixin_44370085的博客-CSDN博客_rstudio改变工作目录blog.csdn.net Rstudio中修改工作路径的三种方法 ...
- java中从键盘输入的三种方法以及Console输入
java中从键盘输入的三种方法: import java.io.BufferedReader; import java.io.IOException; import java.io.InputStre ...
- 计算机启动应用程序的方法,excel的程序_Excel2010中启动应用程序的三种方法
使用Excel时,需要先启动应用程序,怎么去进行操作启动它?今天,学习啦小编就教大家在Excel2010中启动应用程序的三种方法. Excel2010中启动应用程序的三种步骤如下: 1.开始菜单 在桌 ...
- WPF中在XAML中实现数据类型转换的两种方法
WPF中在XAML中实现数据类型转换的两种方法 原文:WPF中在XAML中实现数据类型转换的两种方法 熟悉数据绑定的朋友都知道,当我们在Model中获取一个对象的数据,常常需要对其进行数据转换后显示在 ...
- linux系统中清空文件内容的三种方法
1.使用vi/vim命令打开文件后,输入"%d"清空,后保存即可.但当文件内容较大时,处理较慢,命令如下: vim file_name :%d :wq 2.使用cat命令情况,命令 ...
最新文章
- 暂停和播放CSS3动画的两种实现方法
- CV之OD:计算机视觉之目标检测(Object Detection)方向的简介、使用方法、案例应用之详细攻略
- VTK:Picking之HighlightSelection
- swagger 修改dto注解_Swagger介绍及使用
- Windos下navcat连接虚拟机中的mysql
- dao传递类参数 mybatis_Mybatis (ParameterType) 如何传递多个不同类型的参数
- Linux下设置普通用户使用sudo命令
- 华纳传媒和Discovery合并交易将提前完成 华纳CEO将在交易之前辞职
- 三种urllib实现网页下载,含cookie模拟登陆
- ACM字符串处理算法经典:字符串搜索
- SAS 9.4 的sid问题解决方案汇总(头疼...)
- scikit-learn和tensorflow的区别
- 【转】Windows XP打印共享四大问题及解决方法
- linux dd 命令拷贝iso到U盘
- windows启动winload.exe的数字签名错误问题
- 百度网盘Python客户端bypy
- Android WebView 跳转第三方App
- postgresql中实现按周统计详解
- 英文歌曲:Action Songs for kids
- 后现代婚礼机器人显神通_看机器人“各显神通”