動(dòng)手實(shí)現(xiàn)一個(gè)JSONP

Julylovin 發(fā)布于2019-08-21 16:49 / 1568人閱讀

摘要：但是當(dāng)我們有多個(gè)請(qǐng)求，并且每個(gè)請(qǐng)求的處理都是不一樣的時(shí)候，這個(gè)變量將會(huì)被覆蓋。這是不行的，因此我們應(yīng)該為每一次請(qǐng)求設(shè)置一個(gè)唯一且不會(huì)沖突的變量，因此增加一個(gè)生成名字的方法如下這時(shí)候我們會(huì)發(fā)現(xiàn)我們已經(jīng)利用了一個(gè)類似于隨機(jī)的形式完成了多次請(qǐng)求。

文章首發(fā)于我的github及個(gè)人博客，github請(qǐng)看https://github.com/huruji/blo...，轉(zhuǎn)載請(qǐng)注明出處。

JSONP的原理就不細(xì)說(shuō)了，就是利用script可以跨域的特點(diǎn)來(lái)實(shí)現(xiàn)跨域，首先我們考慮一個(gè)最簡(jiǎn)單的jsonp，就是簡(jiǎn)簡(jiǎn)單單創(chuàng)建script標(biāo)簽，
添加url的功能，如下：

function jsonp(url) {
  const script = document.createElement("script");
  script.src = url;
  script.type = "text/javascript";
  document.body.appendChild(script);
}

此時(shí)我們使用服務(wù)端的代碼如下：

const http = require("http");
const data = {"data":"hello"};
const url = require("url");
const queryString = require("querystring");

http.createServer(function(req, res) {
  var params = url.parse(req.url);
  console.log(params);
  if(params.query && queryString.parse(params.query).callback) {
    console.log(1231232);
    const str = queryString.parse(params.query).callback + "(" + JSON.stringify(data) + ")";
    return res.end(str)
  }
  res.end(JSON.stringify(data));
}).listen(5000);

這是我們調(diào)用jsonp，假設(shè)我們只是想要alert出返回的數(shù)據(jù)，如下：

function msg(res) {
  alert(res.data);
}

jsonp("http://localhost:5000?callback=msg");

這時(shí)候我們運(yùn)行代碼可以發(fā)現(xiàn)已經(jīng)正確彈出了相應(yīng)的數(shù)據(jù)。
但是我們會(huì)發(fā)現(xiàn)這里的callback回調(diào)函數(shù)是一個(gè)全局的，這是不可取的，因此我們需要進(jìn)行一些修改，將處理修改為一個(gè)局部的，我們可以將其作為一個(gè)回調(diào)函數(shù)來(lái)處理，如下：

function jsonp(url, callback) {
  window.jsonpCallback = callback;
  const script = document.createElement("script");
  script.src = url + "?callback=jsonpCallback";
  script.type = "text/javascript";
  document.body.appendChild(script);
}

jsonp("http://localhost:5000", function(res) {
  alert(res.data);
});

這時(shí)候我們會(huì)發(fā)現(xiàn)我們不再需要在url中聲明相應(yīng)的callback了，但是我們還是會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，就是我們將所有的callback都設(shè)置成了一個(gè)全局變量，這樣的原因是因?yàn)槲覀冃枰跀?shù)據(jù)請(qǐng)求完成之后調(diào)用這個(gè)方法，因此不得不設(shè)置為一個(gè)全局變量。但是當(dāng)我們有多個(gè)請(qǐng)求，并且每個(gè)請(qǐng)求的處理都是不一樣的時(shí)候，這個(gè)變量將會(huì)被覆蓋。這是不行的，因此我們應(yīng)該為每一次請(qǐng)求設(shè)置一個(gè)唯一且不會(huì)沖突的變量，因此增加一個(gè)生成callback名字的方法如下：

function generateJsonpCallback() {
  return `jsonpcallback_${Date.now()}_${Math.floor(Math.random() * 100000)}`;
}

function jsonp(url, callback) {
  const funcName = generateJsonpCallback();
  window[funcName] = callback;
  const script = document.createElement("script");
  script.src = `${url}?callback=${funcName}`;
  script.type = "text/javascript";
  document.body.appendChild(script);
}


jsonp("http://localhost:5000", function(res) {
  alert(res.data);
});

jsonp("http://localhost:5000", function(res) {
  const text = document.createTextNode(res.data);
  document.body.appendChild(text);
});

這時(shí)候我們會(huì)發(fā)現(xiàn)我們已經(jīng)利用了一個(gè)類似于隨機(jī)ID的形式完成了多次請(qǐng)求。
但是還是有一個(gè)問(wèn)題大量的請(qǐng)求之后，window中會(huì)含有大量的全局變量，而且還有大量的script標(biāo)簽，這顯然不是我們想要的，所以我們可以在請(qǐng)求完成之后刪除變量和script標(biāo)簽。

function generateJsonpCallback() {
  return `jsonpcallback_${Date.now()}_${Math.floor(Math.random() * 100000)}`;
}

function removeScript(id) {
  document.body.removeChild(document.getElementById(id));
}

function removeFunc(name) {
  delete window[name];
}

function jsonp(url, timeout = 3000, callback) {
  const funcName = generateJsonpCallback();
  window[funcName] = callback;
  const script = document.createElement("script");
  script.src = `${url}?callback=${funcName}`;
  script.id = funcName;
  script.type = "text/javascript";
  document.body.appendChild(script);
  setTimeout(() => {
    removeScript(funcName);
    removeFunc(funcName);
  }, timeout)
}


jsonp("http://localhost:5000", 3000, function(res) {
  alert(res.data);
});

jsonp("http://localhost:5000", 3000, function(res) {
  const text = document.createTextNode(res.data);
  document.body.appendChild(text);
});

我們通過(guò)將利用一個(gè)timeout時(shí)間定時(shí)為我們清除相應(yīng)的script標(biāo)簽和全局變量就可以了，這個(gè)定時(shí)時(shí)間的作用類似于ajax的timeout時(shí)間。
我們所有的內(nèi)容都是使用es6的，那為什么不使用Promise來(lái)處理呢，還要使用煩人的回調(diào)，接下來(lái)那就來(lái)Promise化吧。

function jsonp(url, options = {timeout:3000}) {
  const timeout = options.timeout;
  return new Promise((resolve, reject) => {
    const funcName = generateJsonpCallback();
    window[funcName] = (res) => {
      resolve(res);
      setTimeout(() => {
        removeScript(funcName);
        removeFunc(funcName);
      }, timeout)
    };
    const script = document.createElement("script");
    script.src = `${url}?callback=${funcName}`;
    script.id = funcName;
    script.type = "text/javascript";
    document.body.appendChild(script);
  })
}

調(diào)用只需要如下就可以了

jsonp("http://localhost:5000").then((res) => alert(res.data));

jsonp("http://localhost:5000").then((res) => {
  const text = document.createTextNode(res.data);
  document.body.appendChild(text);
});

到目前為止，一個(gè)較為完整的jsonp就實(shí)現(xiàn)了，但是我們還是會(huì)覺得少了一些什么，相信你已經(jīng)看出來(lái)了，那就是錯(cuò)誤處理。
迄今為止，并沒有測(cè)試過(guò)如果這個(gè)script標(biāo)簽加載不成功如何處理，判斷資源加載失敗，顯然使用的是onerror事件，我們這就把他加上：

function jsonp(url, options = {timeout:3000}) {
  const timeout = options.timeout;
  let timeId;
  return new Promise((resolve, reject) => {
    const funcName = generateJsonpCallback();
    window[funcName] = (res) => {
      resolve(res);
      timeId = setTimeout(() => {
        removeScript(funcName);
        removeFunc(funcName);
      }, timeout)
    };
    const script = document.createElement("script");
    script.src = `${url}?callback=${funcName}`;
    script.id = funcName;
    script.type = "text/javascript";
    document.body.appendChild(script);
    script.onerror = () => {
      reject(new Error(`fetch ${url} failed`));
      removeScript(funcName);
      removeFunc(funcName);
      if(timeId) clearTimeout(timeId);
    }
  })
}

我們可以測(cè)試一下，輸入一個(gè)不存在的url:

jsonp("http://localhost:7000").then((res) => alert(res.data));

可以發(fā)現(xiàn)這時(shí)正常處理錯(cuò)誤了,可以在控制臺(tái)看到相應(yīng)的url獲取失敗，至此，完工；

至此所有的代碼簡(jiǎn)單封裝如下：

(function(global){
  function generateJsonpCallback() {
    return `jsonpcallback_${Date.now()}_${Math.floor(Math.random() * 100000)}`;
  }

  function removeScript(id) {
    document.body.removeChild(document.getElementById(id));
  }

  function removeFunc(name) {
    delete global[name];
  }

  function jsonp(url, options = {timeout:3000}) {
    const timeout = options.timeout;
    let timeId;
    return new Promise((resolve, reject) => {
      const funcName = generateJsonpCallback();
      global[funcName] = (res) => {
        resolve(res);
        timeId = setTimeout(() => {
          removeScript(funcName);
          removeFunc(funcName);
        }, timeout)
      };
      const script = document.createElement("script");
      script.src = `${url}?callback=${funcName}`;
      script.id = funcName;
      script.type = "text/javascript";
      document.body.appendChild(script);
      script.onerror = () => {
        reject(new Error(`fetch ${url} failed`));
        removeScript(funcName);
        removeFunc(funcName);
        if(timeId) clearTimeout(timeId);
      }
    })
  }
  window.jsonp = jsonp;
})(window);

測(cè)試代碼如下：

jsonp("http://localhost:5000").then((res) => alert(res.data));

jsonp("http://localhost:5000").then((res) => {
  const text = document.createTextNode(res.data);
  document.body.appendChild(text);
});

jsonp("http://localhost:7000").then((res) => alert(res.data));

GPU云服務(wù)器云服務(wù)器實(shí)現(xiàn)一個(gè)webrtc java實(shí)現(xiàn)一個(gè)線程用java實(shí)現(xiàn)一個(gè)線程池單例模式實(shí)現(xiàn)一個(gè)數(shù)據(jù)庫(kù)連接池

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Julylovin

男|高級(jí)講師

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

TA的文章

Sharktech：推出云托管服務(wù),白嫖一個(gè)月美國(guó)4核8G服務(wù)器,聯(lián)系客服可獲得$50

閱讀 1436·2021-09-02 10:19
面試官問(wèn)：能否模擬實(shí)現(xiàn)JS的bind方法

閱讀 1141·2019-08-26 13:25
前端面試你所不知道系列

閱讀 2148·2019-08-26 11:37
2019.7.15 - 7.21 我們 36人都學(xué)了些什么？

閱讀 2477·2019-08-26 10:18
::after 1px 間隔線在 Safari 顯示顏色不同于其它的問(wèn)題

閱讀 2718·2019-08-23 16:43
使用web/phpstorm將本地代碼實(shí)時(shí)自動(dòng)同步到遠(yuǎn)程服務(wù)器

閱讀 3128·2019-08-23 16:25
通過(guò) JavaScript 下載文件到本地（單文件）

閱讀 836·2019-08-23 15:53
javaScript中簡(jiǎn)單數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型賦值拷貝的理解

閱讀 3344·2019-08-23 15:11

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

資訊專欄INFORMATION COLUMN

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

動(dòng)手實(shí)現(xiàn)一個(gè)JSONP

相關(guān)文章

**自己動(dòng)手，為vue寫一個(gè)jsonp的方法**

jsonp的原理介紹及Promise封裝

**想知道jsonp到底是怎么實(shí)現(xiàn)的？看我，包教會(huì)！**

基于Vue.js的音樂(lè)播放器（Webapp）

發(fā)表評(píng)論

0條評(píng)論

Julylovin

男|高級(jí)講師

TA的文章

Sharktech：推出云托管服務(wù),白嫖一個(gè)月美國(guó)4核8G服務(wù)器,聯(lián)系客服可獲得$50

面試官問(wèn)：能否模擬實(shí)現(xiàn)JS的bind方法

前端面試你所不知道系列

2019.7.15 - 7.21 我們 36人都學(xué)了些什么？

::after 1px 間隔線在 Safari 顯示顏色不同于其它的問(wèn)題

使用web/phpstorm將本地代碼實(shí)時(shí)自動(dòng)同步到遠(yuǎn)程服務(wù)器

通過(guò) JavaScript 下載文件到本地（單文件）

javaScript中簡(jiǎn)單數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型賦值拷貝的理解

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

動(dòng)手實(shí)現(xiàn)一個(gè)JSONP

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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