vue-resourse实现 get, post, jsonp请求

请求

当发起get请求之后, 通过 .then来设置成功的回调函数.
通过 result.body 拿到服务器返回的成功的数据
```
console.log(result.body);
```
手动发起的Post请求, 默认没有表单格式, 所以, 有的服务器处理不了

通过post方法的第三个参数, { emylateJSON: true }设置提交的内容类型为普通表单数据格式

getInfo() { // get 方式获取数据this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => {console.log(res.body);})
}

postInfo() {var url = 'http://127.0.0.1:8899/api/post';// post 方法接收三个参数：// 参数1： 要请求的URL地址// 参数2： 要发送的数据对象// 参数3： 指定post提交的编码类型为 application/x-www-form-urlencodedthis.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {console.log(res.body);});
}

jsonpInfo() { // JSONP形式从服务器获取数据var url = 'http://127.0.0.1:8899/api/jsonp';this.$http.jsonp(url).then(res => {console.log(res.body);});
}

JSONP的实现原理

由于浏览器的安全性限制, 不允许AJAX访问协议不同、域名不同、端口号不同的数据接口, 浏览器认为这种访问不安全;
可以通过动态创建Script标签的形式, 把script标签的src属性, 指向数据接口的地址, 因为script标签不存在跨域限制, 这种数据获取方式, 称作JSONP( 注意: 根据JSONP的实现原理, 知晓, JSONP只支持Get请求);
具体实现过程:

先在客户端定义一个回调方法, 预定义对数据的操作;
再把这个回调方法的名称, 通过URL传参的形式, 提交到服务器的数据接口;
服务器数据接口组织好要发送给客户端的数据, 再拿着客户端传递过来的回调方法名称, 拼接出一个调用这个方法的字符串, 发送给客户端去解析执行;

客户端拿到服务器返回的字符串之后, 当作script脚本去解析执行, 这样就能够拿到JSONP的数据了;

 const http = require('http');// 导入解析 URL 地址的核心模块const urlModule = require('url');const server = http.createServer();// 监听 服务器的 request 请求事件，处理每个请求server.on('request', (req, res) => {const url = req.url;// 解析客户端请求的URL地址var info = urlModule.parse(url, true);// 如果请求的 URL 地址是 /getjsonp ，则表示要获取JSONP类型的数据if (info.pathname === '/getjsonp') {// 获取客户端指定的回调函数的名称var cbName = info.query.callback;// 手动拼接要返回给客户端的数据对象var data = {name: 'zz',age: 22,gender: '男',hobby: ['吃饭', '睡觉', '学习']}// 拼接出一个方法的调用，在调用这个方法的时候，把要发送给客户端的数据，序列化为字符串，作为参数传递给这个调用的方法：var result = `${cbName}(${JSON.stringify(data)})`;// 将拼接好的方法的调用，返回给客户端去解析执行res.end(result);} else {res.end('404');}});server.listen(3000, () => {console.log('server running at http://127.0.0.1:3000');});

vue-resource的配置步骤:

直接在页面中, 通过script标签, 引入vue-resource的脚本文件;
引用的先后顺序是: 先引用vue的脚本文件, 再引用vue-resource的脚本文件;

十二.vue-resourse实现get,post,jsonp请求相关推荐

Vue.js 学习笔记十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
跨平台应用开发进阶(四十二)vue与nvue页面设计方案探究
文章目录一.前言二.选择方案 2.1 CSS注意事项三.快速上手 3.1 新建 nvue 页面 3.2 开发 nvue 页面 3.3 调试 nvue 页面四.拓展阅读一.前言在应用uni- ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十二║Vue实战：个人博客第一版(axios+router)...
前言今天正式开始写代码了,之前铺垫了很多了,包括 6 篇基础文章,一篇正式环境搭建,就是为了今天做准备,想温习的小伙伴可以再看看<Vue 基础入门+详细的环境搭建>,内容很多,这里就暂时 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十二║Vue实战：个人博客第一版
前言今天正式开始写代码了,之前铺垫了很多了,包括 6 篇基础文章,一篇正式环境搭建,就是为了今天做准备,想温习的小伙伴可以再看看<Vue 基础入门+详细的环境搭建>,内容很多,这里就暂时 ...
【Vue2.0】—Vue脚手架配置代理（二十二）
[Vue2.0]-Vue脚手架配置代理(二十二) 方法一方法二
【Vue2.0】—Vue与Component的关系（十二）
[Vue2.0]-Vue与VueComponent的关系(十二) <body><div id="root"><h2>{{name}}</h ...
从零实现Vue的组件库（十二）- Table 实现
基于Table标签的展示数据组件. Table 组件主要特点在于: 组件 data 的解耦,减少重复代码: 良好的扩展性,可以通过自定义列模板来适应不同的业务场景. 1. 实例代码 <fat- ...
2022前端知识整理：十、vue基础
十.vue基础 2022前端知识整理:第十部分.vue基础,仅包含vue2.0相关知识,建议先完成html5.css3和JavaScript ES6之后再学习.部分图片未上传成功,稍后完善,请见谅. ...
感谢十二年的陪伴——分享回归，不忘初心（Eastmount博客总结及未来规划）
曾记否,2021年4月28日,为了更好地从事科研和学习,当时给所有读者群发了我在CSDN唯一的私信,感谢大家十年的陪伴,短暂消失,不负青春.当时也收到了很多博友的鼓励与祝福,感恩. 是啊!很难想象读博 ...

十二.vue-resourse实现get,post,jsonp请求

文章目录

vue-resourse实现 get, post, jsonp请求

请求

JSONP的实现原理

vue-resource的配置步骤:

十二.vue-resourse实现get,post,jsonp请求相关推荐

最新文章

热门文章