vue学习(二)vue-resource全攻略(二)
2023-09-27 14:26:39 时间
实例补充
post请求
实例一:简单的post提交
// POST /someUrl
this.$http.post('/someUrl', {foo: 'bar'}).then(response => {
// get status
response.status;
// get status text
response.statusText;
// get 'Expires' header
response.headers.get('Expires');
// get body data
this.someData = response.body;
}, response => {
// error callback
});
实例二:带有配置项的post提交
export default({
name:'home',
mounted:function () {
this.$http.post('http://api.chairis.cn/api?app_id=123456&method=demo.run',{
body: {
name: {
first_name: 'chain',
last_name: 'zhang'
},
email: 'zzceng@126.com'
}
},{emulateJSON: true}).then(response => {
console.log('请求成功')
},
response => {
console.log('请求失败')
});
}
})
在这里我们看到了陌生的东西emulateJSON
, 为什么要加这个参数呢,想知道为什么,那么就把他去掉试试,去掉了,你会发现请求失败了,报以下错误:
这是个跨域请求,没有权限的问题,但是已加上这个属性就可以了。
get请求
实例一:不带参数的get提交
var demo = new Vue({
el: '#app',
data: {
gridColumns: ['customerId', 'companyName', 'contactName', 'phone'],
gridData: [],
apiUrl: 'http://211.149.193.19:8080/api/customers'
},
ready: function() {
this.getCustomers()
},
methods: {
getCustomers: function() {
this.$http.get(this.apiUrl)
.then((response) => {
this.$set('gridData', response.data)
})
.catch(function(response) {
console.log(response)
})
}
}
})
实例二:带查询参数和自定义请求头的GET请求
// GET /someUrl?foo=bar
this.$http.get('/someUrl', {params: {foo: 'bar'}, headers: {'X-Custom': '...'}}).then(response => {
// success callback
}, response => {
// error callback
});
实例三:获取图片并使用blob()方法从响应中提取图片的主体内容。
// GET /image.jpg
this.$http.get('/image.jpg', {responseType: 'blob'}).then(response => {
// resolve to Blob
return response.blob();
}).then(blob => {
// use image Blob
});
jsonp请求(可以获取本域之外的一些数据)
实例一:不带参数
getCustomers: function() {
this.$http.jsonp(this.apiUrl).then(function(response){
this.$set('gridData', response.data)
})
}
实例二:带参数
this.$http.jsonp("https://sug.so.360.cn/suggest",{
word:"a"
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
相关文章
- vue 学习资源链接,总结
- 数据可视化工具-Vue-DataV入门
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
- vue一个组件监听另一个组件
- vue.js学习记录
- vue学习
- 学习Vue.js
- vue-awesome-swiper 插件
- VUE&Element简单介绍。
- vue的组件(先学习其他的ES6知识,之后再看这个) (未完)
- vue-spa微信分享,在ios端,分享不成功的原因及解决办法
- 学习Vue的一些看法
- pycharm windows下进行vue的研究学习环境搭建
- SpringBoot+Vue前后端分离项目 打包部署CentOS7 适合初学者部署学习
- vue学习:定义全局变量并使用
- vue学习:使用v-for向select组件绑定数据
- flask+vue学习:关于如何处理列表所需的数据
- Django+Vue项目学习第三篇:使用axios发送get请求,解决跨域问题,调通前后端
- Vue学习第31天——编程式路由导航5种方法详解及案例练习(与声明式路由导航对比)
- Vue学习第29天——路由的props配置项的详解与案例(对比组件props配置项)
- Vue学习第15天——props配置项详解
- 【chatgpt】教你如何创建一个Vue脚手架
- vue入门