Fetch和Jsonp的使用

最新推荐文章于 2024-06-28 21:12:28 发布

我的白银时代

最新推荐文章于 2024-06-28 21:12:28 发布

阅读量1.9k

点赞数

文章标签：前端 javascript 开发语言 es6

本文链接：https://blog.youkuaiyun.com/weixin_63877292/article/details/130976259

版权

Fetch是ES6引入的API，使用Promise处理异步操作，提供了一种替代XMLHttpRequest的方式。JSONP是一种绕过浏览器同源策略的跨域数据交互协议，通过动态创建<script>标签实现GET请求。其工作原理是服务器返回一个包含回调函数的JavaScript代码，该函数在客户端被调用并传递数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Fetch介绍

Jsonp的介绍

Fetch介绍

Fetch是在ES6出现的，它使用了ES6提出的promise对象。它是XMLHttpRequest的替代品。

特点：

使用 promise，不使用回调函数。
采用模块化设计，比如 rep、res 等对象分散开来，比较友好。
通过数据流对象处理数据，可以提高网站性能。
服务器端的fetch可以跨域拿资源，客户端不行

说明:

通过fetch方法获取其他文件的数据返回值是promise对象,对于promise对象来说可以用then来做一个监听,返回值是响应(response),它对应的是http的响应

fetch('a.txt'); 它的返回值是promise对象
fetch的两个方法
.json() 获取目标文件中JSON数据返回的是promise对象
.text() 获取目标文件任意类型的数据，但返回值是字符串返回的是promise对象
fetch里可以写两个参数，第一个是url字符串，第二个参数是对象，用于配置请求(get或post)

使用：

//一种写法
var h = fetch('a.txt').then(function(rps){ 
	console.log(rps)  // 响应 Response对象里面有很多参数...
	var pro = rps.json(); 
	console.log(pro); //promise对象
	  pro.then(data=>{
		  console.log(data); //拿到数据
	  })
})
console.log(h) //返回的是promise对象
//一种写法
fetch('a.txt').then(function(rps){
	return rps.json();\
}).then((res)=>{
	console.log(res);
});
//一种写法
(async function( ){ //es7新增 异步执行函数
	//await 等待  异步代码执行结束之后再执行await的代码
	// var res = await fetch("a.txt");	//response
	// var prm = res.json();	//promise 
	// var data = await prm;
	
	var data = await (await fetch('a.txt')).json(); //简写
	console.log(data);
})();

Jsonp的介绍

JSONP 不是一门编程语言，也不是什么特别的技术，它更像一个漏洞，程序员可以利用这个漏洞，实现跨域（可以简单理解为跨域名）传输数据。虽然 JSONP 与 JSON 看起来很像，但它们却是完全不同的，本节我们就来简单介绍以下 JSONP。

在介绍 JSONP 之前，先来介绍一下浏览器的同源策略。

同源策略
同源策略是由 Netscape（网景）提出的一个著名的安全策略，所有支持 JavaScript 的浏览器都支持这个策略。

所谓同源是指域名、协议、端口都相同。以 http://c.biancheng.net:80/ 为例，c.biancheng.net 为域名，http 为协议，80 为端口（提示：80 为默认端口，可以省略，若为其它端口则必须显示定义）。

为了安全，浏览器不允许进行跨域请求。当我们通过 Ajax 在网页和服务器之间发送或接收数据时，需要保证网页与所请求的地址是同源的，否则无法请求成功。例如 http://c.biancheng.net/ 下的网页，只能与同在 http://c.biancheng.net/ 下的程序进行交互，无法与 https://www.baidu.com/ 下的程序进行交互。

同源策略可以防止 JavaScript 脚本从您的网站中读取数据，并将数据发送到其它的网站。如果没有同源策略，很有可能会有恶意的程序泄露您网站中的内容。

虽然同源策略在一定程度上提高了网站的安全，但也会给程序员带来一些麻烦，例如在访问一些开发接口时，由于同源策略的存在，会调用失败。要解决这种问题就需要用到跨域，跨域的方法有许多种，其中最经典的就是 JSONP。

什么是 JSONP？
JSONP 全称“JSON with Padding”，译为“带回调的 JSON”，它是 JSON 的一种使用模式。通过 JSONP 可以绕过浏览器的同源策略，进行跨域请求。

在进行 Ajax 请求时，由于同源策略的影响，不能进行跨域请求，而 <script> 标签的 src 属性却可以加载跨域的 JavaScript 脚本，JSONP 就是利用这一特性实现的。与普通的 Ajax 请求不同，在使用 JSONP 进行跨域请求时，服务器不再返回 JSON 格式的数据，而是返回一段调用某个函数的 JavaScript 代码，在 src 属性种调用，来实现跨域。

JSONP 的优点是兼容性好，在一些老旧的浏览器种也可以运行，但它的缺点也非常明显，那就是只能进行 GET 请求。

如何实现 JSONP

想要成功从服务器中获取数据，就可以使用我们上面介绍的 JSON 来实现，利用script标签，src设置要请求的地址：

<script src="http://localhost:8081/test.php"></script>
//上行代码可以理解为下行代码，数据在脚本里 (比较片面的一种理解方法)
<script src="http://localhost:8081/test.php">callback(123312)</script>

请求地址的数据是这样的：

callback(123312)

我们就可以这样设置:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        function callback(data){
            console.log(data); //将数据导出
        }
    </script>
    <!-- 当执行了下行代码，就意味着数据在脚本中，再通过一个回调函数直接导出数据即可-->
    <script src="http://localhost:8081/test.php"></script>
    <!-- 下行代码,当后端设置了callback的变量时，我们就可以更方便去调用这个回调函数 -->
    <!--<script src="http://localhost:8081/test.php?callback=callback"></script>-->
</body>
</html>

总结
通过 JSONP，您可以避开浏览器的同源策略，进行跨域请求。JSONP 是利用 HTML 标签的 src 属性引用资源不受同源策影响的特性来实现的，实现步骤如下：