ES6跨域数据访问fetch-jsonp

最新推荐文章于 2024-07-23 19:01:27 发布

置顶

解夕

最新推荐文章于 2024-07-23 19:01:27 发布

阅读量1.4w

点赞数 1

分类专栏： javascript 置顶文章标签： fetch-jsonp 跨域

本文链接：https://blog.csdn.net/liu942626/article/details/79317837

版权

本文介绍了fetch-jsonp库的使用，它是一个基于ES6 Promise的跨域请求工具，适用于GET方法。文章详细讲解了如何在React项目中使用fetch-jsonp代替$.ajax或fetch进行跨域请求，尤其是在后端接口不支持CORS的情况下。通过引入和调用fetch-jsonp，可以简化JSONP请求并增强代码可读性。

摘要由CSDN通过智能技术生成

本篇文章分为三个部分：一、索引说明；二、使用环境介绍；三、fetch-jsonp实现分析。

一、索引说明

本篇文章要说明的是一款跨域数据请求的库文件fetch-jsonp，这是一款github上开源文件，基于ES6下的Promise设计实现，可以在某些情况下替代$.ajax实现数据的跨域访问，github上有非常详细的API说明及使用实例，本文只列举一个简单的例子用于说明，具体还请移步GIT查看。

首先此方法只支持GET方法，而且方法基于ES6的Promise实现：

fetchJsonp('/访问的地址.jsonp')
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('parsed json', json); // 在此处进行接收数据之后的操作
  }).catch(function(ex) {
    console.log('parsing failed', ex) // 此处是数据请求失败后的处理
  })

这样就可以实现跨域请求，还支持then方法异步处理，是不是特别简单。

二、使用环境介绍

这里说明下笔者的开发环境，也就是一步步想到使用fetch-jsonp而不是其他方法去实现跨域请求的原因，如果大家和我遇到了同样的状况，也可以尝试下使用此方法。

对于一个react开发的web网页项目，数据请求使用的方法不是$.ajax而是fetch（fetch是基于ES6浏览器提供的数据请求接口，可以替代$.ajax实现数据请求，基于Promise实现，写法便捷，使用方便，具体可查看在fetch中进行查看）。

开发过程不可避免的遇到了跨域请求，fetch方法是通过配置CORS 实现跨域（no-cors这个配置真心不能用，配置了之后只能够在浏览器控制台看到返回的数据，并不能返回到代码中处理），但是此配置在前端写好配置项的前提下，还需要后端配置下CORS才能实现。现实的开发环境是访问的后端数据接口是之前支持$.ajax的jsonp方式设置的，并且由于某些原因并不能去修改配置，因此网上海淘之后，发现了fetch-jsonp方法。

fetch-jsonp是github上的开源项目，使用简单：

安装：npm install fetch-jsonp ;

引用：import fetchJsonp from 'fetch-jsonp';

调用：

fetchJsonp('/users.jsonp', {
    jsonpCallback: 'custom_callback', // 回调函数名称，默认callback
  })
  .then(function(response) {
    return response.json()
  }).then(function(json</