封装 jsonp请求数据的方法

更新日期: 2019-09-13阅读: 2.2k标签: jsonp

什么是jsonp : 

Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。为什么我们从不同的域(网站)访问数据需要一个特殊的技术( JSONP )呢?这是因为同源策略。

同源策略,它是由 Netscape 提出的一个著名的安全策略,现在所有支持 JavaScript 的浏览器都会使用这个策略。


封装jsonp的方法:

//jsonp.js文件

import originJsonp from 'jsonp'       //首先引入jsonp

//第一个参数url为接口地址。
// 第二个参数data为接口地址后面携带的参数。因为jsonp不支持直接传一个对象。所以,我们可以把url和需要传的参数分开。这样我们调用这个方法的时候会更加方便。
// 第三个参数opts为对应api上面的opts
export default function jsonp(url, data, opts) {
  //拼接url和需要传递的参数data。
  //先判断url后面有没有?号,没有的话后面加?,有的话后面加&
  url += (url.indexOf("?") < 0 ? "?" : "&") + param(data);

  //jsonp的函数我们需要返回一个promise
  return new Promise((resolve, reject) => {
    originJsonp(url, opts, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}


//封装一个方法,把对象拆解出来拼接到url的后面
export function param(data) {
  let url = "";
  for (var k in data) {
    //如果data[k]为undefined的话,就返回空
    let value = data[k] !== undefined ? data[k] : "";
    //我们使用 encodeURIComponent() 对 URI 进行一下编码
    url += `&${k}=${encodeURIComponent(value)}`;
  }
  //如果url不为空的话需要删去第一个&。
  return url ? url.substring(1) : "";
}

 

使用方法:

//引入刚刚封装的jsonp方法
import jsonp from './jsonp.js' 

getData() {
        const url = "http://xxxxxxxx";
        const data = {
          name: 'zhangsan',
          age: 12
        };
        const opts = {
          param: 'jsonpCallback'
        };
        jsonp(url, data, opts).then(res => {
          if (res.code === 0) {
            console.log(res.data);
          }
       })
}


 

链接: https://www.fly63.com/article/detial/5321

Jsonp原理

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

jsonp跨域访问的原理及参数作用

什么是JSONP?先说说JSONP是怎么产生的?不管jQuery也好,ExtJs也罢,又或者是其他支持jsonp的框架,他们幕后所做的工作都是一样的,下面我来循序渐进的说明一下jsonp在客户端的实现

说说JSON和JSONP区别

由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能

原生的js实现jsonp的跨域封装

jsonp是利用浏览器请求script文件时不受同源策略的限制而实现的,伪造一个script标签,将请求数据的url赋值给script的src属性,并将该标签添加到html中,浏览器会自动发送请求,返回的一般时一段js代码,即函数的调用代码。

JSONP原理及其简单封装

一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题;jsonp不是ajax的一个特例,哪怕jquery等巨头把jsonp封装进了ajax,也不能改变!

使用node.js实现JSONP的实例

JSONP与JSON只有一字之差,我们在使用Jquery的Ajax调用的时候也是使用相同的方法来调用,两者的区别几乎只在于使用的dataType这个属性的不同。但是实际上JSON和JSONP是完全不同的两个东西,JSON是一个数据格式

JSON.stringify() 的深入理解

最近在看《你所不知道的javascript》[中卷]一书,第一部分是类型和语法。本文是基于这部分的产物。在强制类型转换->抽象值操作-> toString 部分,其中对工具函数 JSON.stringify(..) 将 JSON 对象序列化为字符串部分介绍进行了详细的介绍。

让 axios 支持 jsonp

因为不想让再引用新的第三方组件了,所以执念了一下,于是搜索到了下面的代码,调试了一下,发现确实能用,但是存在一个缺陷,就是如果存在连续多次的请求,都会回调到同一个函数上

跨域解决方案之JSONP

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现

JavaScript之JSONP跨域

事先定义一个用于获取跨域响应数据的回调函数,并通过没有同源策略限制的script标签发起一个请求(将回调函数的名称放到这个请求的query参数里),然后服务端返回这个回调函数的执行,并将需要响应的数据放到回调函数的参数里

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!