動手實現(xiàn)一個JSONP

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

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

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

JSONP的原理就不細(xì)說了，就是利用script可以跨域的特點來實現(xiàn)跨域，首先我們考慮一個最簡單的jsonp，就是簡簡單單創(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);
}

此時我們使用服務(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");

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

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);
});

這時候我們會發(fā)現(xiàn)我們不再需要在url中聲明相應(yīng)的callback了，但是我們還是會發(fā)現(xiàn)一個問題，就是我們將所有的callback都設(shè)置成了一個全局變量，這樣的原因是因為我們需要在數(shù)據(jù)請求完成之后調(diào)用這個方法，因此不得不設(shè)置為一個全局變量。但是當(dāng)我們有多個請求，并且每個請求的處理都是不一樣的時候，這個變量將會被覆蓋。這是不行的，因此我們應(yīng)該為每一次請求設(shè)置一個唯一且不會沖突的變量，因此增加一個生成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);
});

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

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

到目前為止，一個較為完整的jsonp就實現(xiàn)了，但是我們還是會覺得少了一些什么，相信你已經(jīng)看出來了，那就是錯誤處理。
迄今為止，并沒有測試過如果這個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);
    }
  })
}

我們可以測試一下，輸入一個不存在的url:

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

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

至此所有的代碼簡單封裝如下：

(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);

測試代碼如下：

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ù)器實現(xiàn)一個webrtc java實現(xiàn)一個線程用java實現(xiàn)一個線程池單例模式實現(xiàn)一個數(shù)據(jù)庫連接池

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/88769.html

發(fā)表評論

登陸后可評論

0條評論

Julylovin

男|高級講師

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

TA的文章

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

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

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

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

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

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

閱讀 3160·2019-08-23 16:25
通過 JavaScript 下載文件到本地（單文件）

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

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

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

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

動手實現(xiàn)一個JSONP

相關(guān)文章

**自己動手，為vue寫一個jsonp的方法**

jsonp的原理介紹及Promise封裝

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

基于Vue.js的音樂播放器（Webapp）

發(fā)表評論

0條評論

Julylovin

男|高級講師

TA的文章

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

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

前端面試你所不知道系列

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

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

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

通過 JavaScript 下載文件到本地（單文件）

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

最新活動

資訊專欄INFORMATION COLUMN

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

動手實現(xiàn)一個JSONP

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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