什么是jsonp : 

Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。

为什么我们从不同的域(网站)访问数据需要一个特殊的技术( JSONP )呢?这是因为同源策略。

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

了解一下jsonp的api : 

封装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);
}
})
}

封装 jsonp请求数据的方法的更多相关文章

  1. 基于AFNetWorking 3.0封装网络请求数据的类

    对于使用 AFNetworking 的朋友来说,很多朋友都是直接调用 AFNetworking的 API ,这样不太好,无法做到全工程统一配置. 最好的方式就是对网络层再封装一层,全工程不允许直接使用 ...

  2. vue 使用 jsonp 请求数据

    vue 使用 jsonp 请求数据 vue请求数据的时候,会遇到跨域问题,服务器为了保证信息的安全,对跨域请求进行拦截,因此,为了解决vue跨域请求问题,需要使用jsonp. 安装jsonp npm ...

  3. 自定义jsonp请求数据

    整理代码的时候发现一个以前写的实现jsonp请求方法,放在这里分享一下~ 原理:通过js新建script dom对象,利用src携带参数和callback方法,将数据发送至后端,需要后端配合将数据放在 ...

  4. 从API请求数据的方法(主要适用于tp5)

    // 从api获取数据,$data是一个数组,默认为空,请求数据的方法可以通用,但是其它说明只适用于tp5 function postData($url,$data=''){ $ch = curl_i ...

  5. EL表达式无法获取Spring MVC的Model封装好的数据解决方法

    1.在spring-mvc的配置文件中已经配置jsp的视图解析器 2.在Controller中使用Model的addAttribute方法添加属性name,msg 3.在jsp页面中使用${msg}取 ...

  6. 关于ajax请求数据的方法

    $.ajax({  //课程详情信息    type:'get',     data: {'id':courseId},    dataType:'json',        beforeSend : ...

  7. 豆瓣 jsonp 请求数据 并分页

    豆瓣分页 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 ...

  8. js跨域请求数据的3种常用的方法

    由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript   在 ...

  9. angular开发中对请求数据层的封装

    代码地址如下:http://www.demodashi.com/demo/11481.html 一.本章节仅仅是对angular4项目开发中数据请求封装到model中 仅仅是在项目angular4项目 ...

随机推荐

  1. react解析: render的FiberRoot(三)

    react解析: render的FiberRoot(三) 感谢 yck: 剖析 React 源码解析,本篇文章是在读完他的文章的基础上,将他的文章进行拆解和加工,加入我自己的一下理解和例子,便于大家理 ...

  2. 通过注解实现通用导出Excel

    Javaweb开发中数据的导入导出很常见,每次我们都需要写很多代码,所以我就在想能不能写一些通用的方法,之前已经在网上 整理过一些通用的方法,最近在网上看到一位牛人封装的更加简介,自己拿过来整理了一下 ...

  3. html5 拖拽(drag)和f放置(drop)

    知识要点 HTML5 (drag&drop) API  (Event) 拖放数据(对象):DataTransfer 拖放内容:setData getData 拖放效果(动作):dropEffe ...

  4. keras 学习-线性回归

    园子里头看到了一些最基础的 keras 入门指导, 用一层网络,可以训练一个简单的线性回归模型. 自己学习了一下,按照教程走下来,结果不尽如人意,下面是具体的过程. 第一步: 生成随机数据,绘出散点图 ...

  5. 解放双手——相机与IMU外参的在线标定

    本文作者 沈玥伶,公众号:计算机视觉life,编辑部成员 一.相机与IMU的融合 在SLAM的众多传感器解决方案中,相机与IMU的融合被认为具有很大的潜力实现低成本且高精度的定位与建图.这是因为这两个 ...

  6. linux+jenkins+python+svn 自动化测试集成之路

    本文背景: 背景1---个人基础: 本机win7上安装pycharm,使用python搭建API自动化测试框架,本地运行Pass.本机上搭建jenkins,创建测试任务,定时构建Pass. 背景2-- ...

  7. centos7.x 安装系统/配置网络/设置主机名

    1.安装系统     系统的安装就不多说了,自行查找百度,如:https://www.cnblogs.com/wcwen1990/p/7630545.html   2.配置网络(局域网上网) 修改配置 ...

  8. c语言和c++的交换函数

    #include<iostream> using namespace std; namespace LiuGang{//在命名空间中写函数 void swap(int&aa,int ...

  9. tomcat启动nio,apr详解以及配置

    tomcat启动nio,apr详解以及配置 前言 在正文开始之前,我们先在idea工具中看看启动的信息,顺便看下启动的基本信息 在这里插入图片描述可以看到信息有tomcat版本操作系统版本java版本 ...

  10. 二分查找法---scala方式

    二分查找法---scala方式 ,b) } }