一篇文章吃透Jsonp

seal_de 發(fā)布于2019-08-22 13:55 / 919人閱讀

摘要：前言最近因?yàn)楣ぷ鞯木壒?，幾乎把市面上所有庫都下載了一遍，卻發(fā)現(xiàn)沒有百分百讓我滿意的，最后自己手動改寫了，才符合了要求，也因此有了這篇文章。在這一點(diǎn)上不得不說做的很好，的函數(shù)包含了對各種情況的處理，還偽造了一個狀態(tài)碼的返回。

前言

最近因?yàn)楣ぷ鞯木壒?，幾乎把市面上所有Jsonp庫都下載了一遍，卻發(fā)現(xiàn)沒有百分百讓我滿意的，最后自己手動改寫了Jsonp，才符合了要求，也因此有了這篇文章。本文示例詳實(shí)，代碼簡單，想弄明白Jsonp, 這一篇文章就夠了。

什么是Jsonp

因?yàn)锳JAX收到瀏覽器同源策略的限制，導(dǎo)致在跨域上有心無力，經(jīng)常需要后臺同學(xué)的幫助。而在瀏覽器中，所有帶有src的標(biāo)簽都是不受同源策略限制的，如image, script。Jsonp上就是利用了script標(biāo)簽的這個特點(diǎn)，來實(shí)現(xiàn)跨域的。

其中，Jsonp和AJAX的原理完全不同，只不過Jquery帶了個很不好的頭，把兩個東西封裝在一起了，所以經(jīng)常讓新的同學(xué)混淆了。

Jsonp的原理：script src
AJAX的原理：xhr

舉一個最簡單的Jsonp的例子：





    
    
    
    Jsonp簡單示例

http://www.qq.com/getJsonp?callback=jsonCallback這個鏈接返回的內(nèi)容應(yīng)該是

jsonpCallback({
    msg: success
})

這樣，相當(dāng)于后臺調(diào)用了前臺提前寫好的callback函數(shù)，將要返回的數(shù)據(jù)當(dāng)做callback函數(shù)的參數(shù)傳入，這樣前端就拿到后臺傳回來的數(shù)據(jù)了。

改寫Jsonp

但是坦白來說，單純的拿到數(shù)據(jù)并不能讓我們滿意。一個合適的請求函數(shù)，必然包含對成功、失敗、超時的處理，就像我們上面寫的那個簡單示例，一旦出現(xiàn)異常，就不能讓我們滿意了。

在這一點(diǎn)上不得不說Jquery做的很好，Jquery的Jsonp函數(shù)包含了對各種情況的處理，還偽造了一個http狀態(tài)碼的返回。

Jsonp和AJAX不同，是拿不到狀態(tài)碼的，但是Jquery對于所有的錯誤都賦予了一個404的狀態(tài)碼，也是機(jī)智

對比其他的組件庫（axios-jsonp, axios-jsonp-pro, jsonp, fetch=jsonp-es6）, 要不就是完全沒有對超時的處理，要不然就是把錯誤和超時混成一譚，更有甚者，有些都不能自定義callback函數(shù)的名字。這簡直太過分了。

那我為什么不選擇Jquery呢？因?yàn)樘罅耍瑆ebpack引入JQuery后瞬間大了80K, 而且多帶帶將Jsonp打包出來也有70K的樣子，而我的源碼只有20K，這是我不能接受的。

jsonp這個組件的問題是沒有對錯誤的處理，理解了Jsonp的原理，我們能很容易的添加上這塊的邏輯，以下是添加后的源碼：

/**
 * Module exports.
 */

module.exports = jsonp;

/**
 * Callback index.
 */

var count = 0;

/**
 * Noop function.
 */

function noop(){}

/**
 * JSONP handler
 *
 * Options:
 *  - param {String} qs parameter (`callback`)
 *  - prefix {String} qs parameter (`__jp`)
 *  - name {String} qs parameter (`prefix` + incr)
 *  - timeout {Number} how long after a timeout error is emitted (`60000`)
 *
 * @param {String} url
 * @param {Object|Function} optional options / callback
 * @param {Function} optional callback
 */

function jsonp(url, opts, fn){
  if ("function" == typeof opts) {
    fn = opts;
    opts = {};
  }
  if (!opts) opts = {};

  var prefix = opts.prefix || "__jp";

  // use the callback name that was passed if one was provided.
  // otherwise generate a unique name by incrementing our counter.
  var id = opts.name || (prefix + (count++));

  var param = opts.param || "callback";
  var timeout = null != opts.timeout ? opts.timeout : 60000;
  var enc = encodeURIComponent;
  var target = document.getElementsByTagName("script")[0] || document.head;
  var script;
  var timer;


  if (timeout) {
    timer = setTimeout(function(){
      cleanup();
      if (fn) fn(new Error("Timeout"));
    }, timeout);
  }

  function cleanup(){
    if (script.parentNode) script.parentNode.removeChild(script);
    window[id] = noop;
    if (timer) clearTimeout(timer);
  }

  function cancel(){
    if (window[id]) {
      cleanup();
    }
  }

  window[id] = function(data){
    cleanup();
    if (fn) fn(null, data);
  };

  // add qs component
  url += (~url.indexOf("?") ? "&" : "?") + param + "=" + enc(id);
  url = url.replace("?&", "?");

  // create script
  script = document.createElement("script");
  script.src = url;
  
  // 添加對錯誤的處理
  script.onerror = function (evt) {
      if (fn) fn(new Error("Error"));
      if (timer) clearTimeout(timer)
  }
  target.parentNode.insertBefore(script, target);

  return cancel;
}

因?yàn)榇蟛糠质侨思业拇a，我也就不班門弄斧了，有需要的可以直接npm install jsonp, 然后比對node_modules/jsonp/index.js進(jìn)行修改；有需要對Jsonp有更詳細(xì)的處理的，也可以在我的基礎(chǔ)上繼續(xù)添加。

總結(jié)

Jsonp的本質(zhì)就是創(chuàng)建一個回調(diào)函數(shù)，然后在遠(yuǎn)程服務(wù)上調(diào)用這個函數(shù)并且將JSON數(shù)據(jù)形式作為參數(shù)傳遞，完成回調(diào)。比起另外兩種后臺無感知的跨域方案：image src、fetch no-cor，Jsonp可以對錯誤和超時進(jìn)行處理，也能對后臺返回的數(shù)據(jù)進(jìn)行分析；而對于AJAX，Jsonp免去了后臺添加跨域頭的煩惱，后臺的改動較小，一次寫好，終生受用（跨域頭還要不斷維護(hù)白名單）。這三種方案都有各自的使用場景，要在不同的場景進(jìn)行恰當(dāng)?shù)倪x用，以上。

GPU云服務(wù)器云服務(wù)器 JSONP jsonp： jsonp 跨域 webapi?jsonp?

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92627.html

發(fā)表評論

登陸后可評論

0條評論

seal_de

男|高級講師

我要關(guān)注我要私信

TA的文章

Python0基礎(chǔ)（中）——期末不掛科

閱讀 2960·2021-11-23 09:51
珠峰前端架構(gòu)師培養(yǎng)計劃

閱讀 3786·2021-11-22 15:29
創(chuàng)業(yè)經(jīng)驗(yàn)教訓(xùn)-新的思考

閱讀 3244·2021-10-08 10:05
云主機(jī)怎么搭建-云主機(jī)怎么配置環(huán)境？

閱讀 1568·2021-09-22 15:20
前端面試題

閱讀 983·2019-08-30 15:56
寫了一個可以通過調(diào)后臺接口實(shí)現(xiàn)模糊查詢的下拉框（因?yàn)閘ayui.js不滿足需求）。

閱讀 1081·2019-08-30 15:54
Es6 之你以為你知道的 const 關(guān)鍵字

閱讀 741·2019-08-26 11:54
Vue雙向綁定的實(shí)現(xiàn)原理系列（二）：設(shè)計模式

閱讀 2643·2019-08-26 11:32

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

一篇文章吃透Jsonp

相關(guān)文章

前端20個真正靈魂拷問，吃透這些你就是中級前端工程師【上篇】

前端20個真正靈魂拷問，吃透這些你就是中級前端工程師【上篇】

5分鐘吃透React Native Flexbox

5分鐘吃透React Native Flexbox

吃透動態(tài)代理，解密spring AOP源碼（四）

發(fā)表評論

0條評論

seal_de

男|高級講師

TA的文章

Python0基礎(chǔ)（中）——期末不掛科

珠峰前端架構(gòu)師培養(yǎng)計劃

創(chuàng)業(yè)經(jīng)驗(yàn)教訓(xùn)-新的思考

云主機(jī)怎么搭建-云主機(jī)怎么配置環(huán)境？

前端面試題

寫了一個可以通過調(diào)后臺接口實(shí)現(xiàn)模糊查詢的下拉框（因?yàn)閘ayui.js不滿足需求）。

Es6 之你以為你知道的 const 關(guān)鍵字

Vue雙向綁定的實(shí)現(xiàn)原理系列（二）：設(shè)計模式

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

一篇文章吃透Jsonp

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！