唯品秀前端博客
当前位置: 前端开发 > JavaScript > 前端如何优雅的使用jsonp获取接口数据

前端如何优雅的使用jsonp获取接口数据

2019-03-15 分类：JavaScript 作者：管理员 阅读（1040）

在进行前后端分离项目开发过程中，我们会不可避免的在一些情况下需要进行数据跨域请求，而最常见的就是jsonp方式，先说说jsonp基本原理，用大白话来讲，就是说你将一个js文件去外部引入到页面，不管那个js地址是本地还是远程cdn在线的，我们都是可以引入进来直接使用的，跨域情况下最突出特点就是你在地址栏输入接口地址，是可以拿到后端返回数据的的，但实际去用ajax请求，就控制台提示报错说跨域了不支持，这时候我们可以想象，那如果把接口文件直接像js文件地址那样动态的引入进来，岂不是就可以拿到数据了？这就是最原始基本的jsonp原理，具体可以百度再多了解下。

因为在项目中时长会遇到这个问题，但又不是天天用，所以有时候我也记得不是很清楚，故此抽点时间整理下分享给大家，下面通过实例讲讲如何在项目中利用插件轻轻松松进行跨域jsonp去请求。

先看看跨域是什么样子

可能有的小伙伴还不知道什么是跨域或者不知道当前请求是不是跨域了，没关系，看个图就知道了，当你请求出现如下情况，那就是跨域了

插件一、fetch-jsonp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//安装方式：
npm install fetch-jsonp
import fetchJsonp from 'fetch-jsonp';
//示例：
//需要跨域的接口：https://dfttdetail.dftoutiao.com/newsmore_h5detail/newspool
fetchJsonp('https://dfttdetail.dftoutiao.com/newsmore_h5detail/newspool', {
      jsonpCallback: 'jsonpcallback',
      //指定回调的查询字符串的名称（默认callback）,后端可能自定义，比如当前案例约定的是jsonpcallback
      jsonpCallbackFunction: 'newspool' //回调函数的方法名称
    })
      .then(function(response) {
        return response.json();
      })
      .then(function(json) {
        that.listData = json.data;
      })
      .catch(function(ex) {
        console.log('parsing failed', ex);
      });

注意：此插件本身是不支持IE浏览器的，官方有说明，如果想支持IE，还需要接口另一个插件ES6 Promise，具体官方github查看，在地址栏实际请求的应该是这样的。

插件二、JSONP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//安装方式：
npm install jsonp
import jsonp from 'jsonp';
//示例：
jsonp(
      'http://tianqi.eastday.com/data/city/58362.js',
      {
        param: 'jsonpcallback',
        //指定回调的查询字符串的名称（默认callback）,后端可能自定义，比如当前案例约定的是jsonpcallback
        name: 'weather'//回调函数方法名称
      },
      function(data) {
        this.weatherData = data;
        console.log('天气', data);
      }
 );

这个插件api官方相对清晰，有好几个参数可设置，如下：

插件三、vue-jsonp

顾名思义，这个插件更适合在vue项目中区使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//在main.js中引入，并作为插件使用
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)
//请求示例：
this.$jsonp(
        `http://123.59.59.109/peoplerecognition/personpath`,
        {
          callbackQuery: 'jsonpcallback',
          //指定回调的查询字符串的名称（默认callback）,后端可能自定义，比如当前案例约定的是jsonpcallback
          callbackName: 'jsonpFunc' //回调函数方法名称
       }
      ).then(data => {
        //console.log("人员行使轨迹", data);
      });

jquery中跨域请求

第一种方法是在ajax函数中设置dataType为'jsonp'

1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({

  dataType: 'jsonp',

  url: 'http://www.a.com/user?id=123',

  success: function(data){

    //处理data数据

  }

});

第二种方法是利用getJSON来实现，只要在地址中加上callback=?参数即可

1
2
3
4
5
$.getJSON('http://www.a.com/user?id=123&callback=?', function(data){

  //处理data数据

});

第三种方法是使用getScript方法

1
2
3
4
5
6
7
8
9
//此时也可以在函数外定义foo方法

function foo(data){

  //处理data数据

}

$.getScript('http://www.a.com/user?id=123&callback=foo');

小结

可以看出，在使用jsonp过程中主要需要确定一点，和后端约定的查询字符串的名称，回调函数名称是前端自己随意定义的，不同插件只是参数名称有所出入，用法基本一样，另外值得一提的是，jsonp只能通过get的方式去请求数据，也就是通过地址栏拼参数方式请求，希望本文章对大家以后在面对jsonp数据交互时候能够事半功倍。angular1.x跨域请看angular1.2通过$http请求数据及跨域（兼容IE8）

「两年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(2) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
赏 2

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签：

上一篇：

下一篇：

你可能感兴趣

共有 0 条评论 - 前端如何优雅的使用jsonp获取接口数据

博客简介

唯品秀博客: weipxiu.com，一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站，愿景：成为宇宙中最具有代表性的前端博客，期待您的参与 

最近更新

随机文章

热门标签

caniuse兼容性 阿里CDN CDN大全 博主Github 百度统计 百度收录 关键词排名 经典css片段 时间戳格式化 全国黑企名单 武汉黑企名单 996.ICU火了 Js33个概念 vConsole DSBridge DOM元素进屏 Shareinstall Http接口测试 前端面试100问 Vue.js200问 Node.js上线

精彩评论

友情链接

他们同样是一群网虫，却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步，但同学却不局限在一国一校，而是遍及全球！申请交换友链

站点统计

  • 文章总数： 231 篇
  • 草稿数目： 0 篇
  • 分类数目： 14 个
  • 独立页面： 6 个
  • 评论总数： 846 条
  • 链接总数： 12 个
  • 标签总数： 416 个
  • 建站时间： 980 天
  • 注册用户： 1856 人
  • 访问总量： 8652706 次
  • 最近更新： 2019年8月22日
服务热线：
 173xxxx7240

 QQ在线交流

点击这里给我发消息
点击这里给我发消息

 旺旺在线

点击这里给我发消息
点击这里给我发消息