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

Bertha 。 2023-06-21 03:51 33阅读 0赞

### 文章目录 ###

*  vue-resourse实现 get, post, jsonp请求
 *   *   *  请求
         *  JSONP的实现原理
         *  vue-resource的配置步骤:

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

### 请求 ###

1.  当发起get请求之后, 通过 .then来设置成功的回调函数.
2.  通过 result.body 拿到服务器返回的成功的数据
    
        console.log(result.body);
3.  手动发起的Post请求, 默认没有表单格式, 所以, 有的服务器处理不了
4.  通过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-urlencoded
          this.$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的实现原理 ###

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

*  先在客户端定义一个回调方法, 预定义对数据的操作;
 *  再把这个回调方法的名称, 通过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的配置步骤: ###

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