資訊專欄INFORMATION COLUMN
摘要：它之后能夠被使用到很多場(chǎng)景中其他處理請(qǐng)求和響應(yīng)的方式，甚至任何需要生成自己的響應(yīng)的方式?？偨Y(jié)到這里都講完了，其實(shí)沒(méi)什么難度，主要是自己項(xiàng)目中遇到了，但是中沒(méi)有這個(gè)方法啊。所以就想著實(shí)現(xiàn)了一個(gè)，因?yàn)槠渌姆椒ㄒ捕挤庋b，不差這一個(gè)了。
Fetch 提供了對(duì)?Request?和?Response?（以及其他與網(wǎng)絡(luò)請(qǐng)求有關(guān)的）對(duì)象通用的定義。它之后能夠被使用到很多場(chǎng)景中：service workers、Cache API、其他處理請(qǐng)求和響應(yīng)的方式，甚至任何需要生成自己的響應(yīng)的方式。
眾所周知，fetch提供的請(qǐng)求資源的方法并不包括jsonp，但是我們又想像使用fetch那樣使用jsonp方法該怎么辦呢，本文就手把手教你實(shí)現(xiàn)一個(gè)自己的fetch jsonp方法。源碼在這里.
這里就不再累述jsonp的原理了，不懂得自行百度或者google吧。
要自己書(shū)寫(xiě)一個(gè)jsonp的方法，是要實(shí)現(xiàn)以下幾個(gè)模塊：
生成script標(biāo)簽
注冊(cè)callback函數(shù)
返回一個(gè)Promise
移除script標(biāo)簽
移除callback函數(shù)
1、生成script標(biāo)簽這一部分就直接生成手動(dòng)操作dom實(shí)現(xiàn)就可以，需要注意的是，為了方便之后刪除這個(gè)script標(biāo)簽，需要在創(chuàng)建的時(shí)候給這個(gè)標(biāo)簽增加一個(gè)id屬性。具體代碼如下：
function createScript(_url, _id) {
const script = document.createElement("script");
script.setAttribute("src", _url);
script.id = _id;
document.getElementsByTagName("head")[0].appendChild(script);
}
2、注冊(cè)callback函數(shù)
注冊(cè)callback函數(shù)主要是給window添加一個(gè)屬性，這個(gè)屬性可以什么都不用干，因?yàn)楫吘鼓阒恍枰玫剿膮?shù)，也就是請(qǐng)求的資源就可以。這里有一點(diǎn)需要注意就是為了防止和window本來(lái)的屬性沖突，最好取個(gè)奇奇怪怪，隨機(jī)最好的名字。我取得名字就是jsonp123212這種。代碼如下：
function generateCB() {
return `jsonp${Math.ceil(Math.random() * 1000000)}`;
}
window[cb] = (res) => {
alert(res) //這里的res就是你想請(qǐng)求的資源
}
3、返回一個(gè)promise
這一部分是核心，只有成功的返回了一個(gè)promise才能有機(jī)會(huì)像fetch那樣的形式去使用。實(shí)現(xiàn)的方法就是在callback函數(shù)中把返回的結(jié)果resolve出去。怎么resolve出去？callback是全局的函數(shù)?。窟@個(gè)時(shí)候就得想想閉包了，它的存在就是結(jié)束這種坑爹的事情的，我們只要在定時(shí)callback的時(shí)候讓他能訪問(wèn)到resolve是不是就解決了呢？是的，具體做法，你看看：
function fetchJsonp(url) {
return new Promise((resolve, reject)=>{
window[cb] = (res) => {
resolve(res)
}
createScript() // 這里就是生成script的函數(shù)
})
}
4、移除script標(biāo)簽
script標(biāo)簽用過(guò)就不要再留著了，壞處一大堆，為了優(yōu)雅我們就刪了他
function removeScipt(_id) {
const script = document.getElementById(_id);
document.getElementsByTagName("head")[0].removeChild(script);
}
5、移除cb函數(shù)
script你都移除了，cb更不能留著了啊，這個(gè)還是個(gè)全局變量呢，所以刪。
function removeCB(_name) {
delete window[_name];
}
總結(jié)
到這里都講完了，其實(shí)沒(méi)什么難度，主要是自己項(xiàng)目中遇到了jsonp，但是fetch中沒(méi)有這個(gè)方法啊。所以就想著實(shí)現(xiàn)了一個(gè)，因?yàn)槠渌姆椒ㄒ捕挤庋b，不差這一個(gè)了。完整的項(xiàng)目代碼在這里。
還有需要補(bǔ)充的是我直接resolve了，沒(méi)有做錯(cuò)誤處理，也一時(shí)想不到什么錯(cuò)誤處理，有人想到了可以告訴我一下。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/88078.html
摘要：概述項(xiàng)目是基于，成品是一個(gè)移動(dòng)端的音樂(lè)播放器，來(lái)源于的實(shí)戰(zhàn)課程。播放器是全局組件，放在下面，通過(guò)傳遞數(shù)據(jù)，觸發(fā)提交，從而使播放器開(kāi)始工作。將請(qǐng)求的數(shù)據(jù)格式化后再通過(guò)傳遞，組件間共享，實(shí)現(xiàn)歌曲的播放切換等。 概述 項(xiàng)目是基于Vue.js，成品是一個(gè)移動(dòng)端的音樂(lè)播放器，來(lái)源于imooc的實(shí)戰(zhàn)課程。自己動(dòng)手實(shí)踐并加以修改拓展。項(xiàng)目的大致流程是Vue-cli構(gòu)建開(kāi)發(fā)環(huán)境，分析需求，設(shè)計(jì)構(gòu)思，規(guī)...
摘要：封裝手寫(xiě)的方筆記使用檢測(cè)文件前端掘金副標(biāo)題可以做什么以及使用中會(huì)遇到的坑。目的是幫助人們用純中文指南實(shí)現(xiàn)復(fù)選框中多選功能前端掘金作者緝熙簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。 深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測(cè)試框架 Chai.js 源碼貢獻(xiàn)者之一，Chai.js 中會(huì)遇到很多異常處理...
摘要：封裝手寫(xiě)的方筆記使用檢測(cè)文件前端掘金副標(biāo)題可以做什么以及使用中會(huì)遇到的坑。目的是幫助人們用純中文指南實(shí)現(xiàn)復(fù)選框中多選功能前端掘金作者緝熙簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。 深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測(cè)試框架 Chai.js 源碼貢獻(xiàn)者之一，Chai.js 中會(huì)遇到很多異常處理...
摘要：但是當(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)注明出處。 show...
閱讀 1180·2023-04-25 14:20
閱讀 2011·2021-11-24 10:20
閱讀 3945·2021-11-11 16:55
閱讀 3151·2021-10-14 09:42
閱讀 3621·2019-08-30 15:56
閱讀 1406·2019-08-30 15:55
閱讀 1219·2019-08-30 15:44
閱讀 925·2019-08-29 11:28
