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

dongxiawu 發布于2019-08-21 15:02 / 886人閱讀

摘要：它之后能夠被使用到很多場景中其他處理請求和響應的方式，甚至任何需要生成自己的響應的方式。總結到這里都講完了，其實沒什么難度，主要是自己項目中遇到了，但是中沒有這個方法啊。所以就想著實現了一個，因為其他的方法也都封裝，不差這一個了。

Fetch 提供了對?Request?和?Response?（以及其他與網絡請求有關的）對象通用的定義。它之后能夠被使用到很多場景中：service workers、Cache API、其他處理請求和響應的方式，甚至任何需要生成自己的響應的方式。

眾所周知，fetch提供的請求資源的方法并不包括jsonp，但是我們又想像使用fetch那樣使用jsonp方法該怎么辦呢，本文就手把手教你實現一個自己的fetch jsonp方法。源碼在這里.

這里就不再累述jsonp的原理了，不懂得自行百度或者google吧。

要自己書寫一個jsonp的方法，是要實現以下幾個模塊：

生成script標簽

注冊callback函數

返回一個Promise

移除script標簽

移除callback函數

1、生成script標簽

這一部分就直接生成手動操作dom實現就可以，需要注意的是，為了方便之后刪除這個script標簽，需要在創建的時候給這個標簽增加一個id屬性。具體代碼如下：

function createScript(_url, _id) {
  const script = document.createElement("script");
  script.setAttribute("src", _url);
  script.id = _id;
  document.getElementsByTagName("head")[0].appendChild(script);
}

2、注冊callback函數

注冊callback函數主要是給window添加一個屬性，這個屬性可以什么都不用干，因為畢竟你只需要拿到他的參數，也就是請求的資源就可以。這里有一點需要注意就是為了防止和window本來的屬性沖突，最好取個奇奇怪怪，隨機最好的名字。我取得名字就是jsonp123212這種。代碼如下：

function generateCB() {
  return `jsonp${Math.ceil(Math.random() * 1000000)}`;
}

window[cb] = (res) => {
  alert(res)  //這里的res就是你想請求的資源
}

3、返回一個promise

這一部分是核心，只有成功的返回了一個promise才能有機會像fetch那樣的形式去使用。實現的方法就是在callback函數中把返回的結果resolve出去。怎么resolve出去？callback是全局的函數啊？這個時候就得想想閉包了，它的存在就是結束這種坑爹的事情的，我們只要在定時callback的時候讓他能訪問到resolve是不是就解決了呢？是的，具體做法，你看看：

function fetchJsonp(url) {
  return new Promise((resolve, reject)=>{
    window[cb] = (res) => {
      resolve(res)
    }
       createScript() // 這里就是生成script的函數
  })
}

4、移除script標簽

script標簽用過就不要再留著了，壞處一大堆，為了優雅我們就刪了他

function removeScipt(_id) {
  const script = document.getElementById(_id);
  document.getElementsByTagName("head")[0].removeChild(script);
}

5、移除cb函數

script你都移除了，cb更不能留著了啊，這個還是個全局變量呢，所以刪。

function removeCB(_name) {
  delete window[_name];
}

總結

到這里都講完了，其實沒什么難度，主要是自己項目中遇到了jsonp，但是fetch中沒有這個方法啊。所以就想著實現了一個，因為其他的方法也都封裝，不差這一個了。完整的項目代碼在這里。

還有需要補充的是我直接resolve了，沒有做錯誤處理，也一時想不到什么錯誤處理，有人想到了可以告訴我一下。

GPU云服務器云服務器自己動手寫爬蟲自己動手寫網路爬蟲自己動手寫網絡爬蟲自己動手寫開發工具

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88078.html

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

摘要：概述項目是基于，成品是一個移動端的音樂播放器，來源于的實戰課程。播放器是全局組件，放在下面，通過傳遞數據，觸發提交，從而使播放器開始工作。將請求的數據格式化后再通過傳遞，組件間共享，實現歌曲的播放切換等。概述項目是基于Vue.js，成品是一個移動端的音樂播放器，來源于imooc的實戰課程。自己動手實踐并加以修改拓展。項目的大致流程是Vue-cli構建開發環境，分析需求，設計構思，規...

widuu 2019-08-20 18:23 評論0 收藏0
前端空間 - 收藏集 - 掘金

摘要：封裝手寫的方筆記使用檢測文件前端掘金副標題可以做什么以及使用中會遇到的坑。目的是幫助人們用純中文指南實現復選框中多選功能前端掘金作者緝熙簡介是推出的一個天挑戰。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測試框架 Chai.js 源碼貢獻者之一，Chai.js 中會遇到很多異常處理...

you_De 2019-08-29 12:34 評論0 收藏0
前端空間 - 收藏集 - 掘金

摘要：封裝手寫的方筆記使用檢測文件前端掘金副標題可以做什么以及使用中會遇到的坑。目的是幫助人們用純中文指南實現復選框中多選功能前端掘金作者緝熙簡介是推出的一個天挑戰。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測試框架 Chai.js 源碼貢獻者之一，Chai.js 中會遇到很多異常處理...

lwx12525 2019-08-20 16:35 評論0 收藏0
動手實現一個JSONP

摘要：但是當我們有多個請求，并且每個請求的處理都是不一樣的時候，這個變量將會被覆蓋。這是不行的，因此我們應該為每一次請求設置一個唯一且不會沖突的變量，因此增加一個生成名字的方法如下這時候我們會發現我們已經利用了一個類似于隨機的形式完成了多次請求。文章首發于我的github及個人博客，github請看https://github.com/huruji/blo...，轉載請注明出處。 show...

Julylovin 2019-08-21 16:49 評論0 收藏0