網路請求之jsonp封裝

2022-02-28 16:50:37 字數 1436 閱讀 2127

首先介紹下jsonp原理   

瀏覽器因為同源策略的限制,在不同源的伺服器通過我們傳統axios是不能直接用來請求資料的(忽略**),而src標籤則不受同源策略的影響,所以我們需要動態的建立帶有src的標籤讓其進行資料的請求,這就是jsonp的原理,在src的url位址末尾拼接上乙個**函式,用來接受伺服器傳回來的資料

1

//封裝乙個jsonp請求的函式

2function

query(opt)

7return

str8}9

//設定預設**函式的名字

10 const defaultoptions =

16function jsonp(url, opt, options =defaultoptions) =$`;

23//

首先創造乙個標籤 帶有src的

24 const scriptdom = document.createelement("script");

25//

設定其src屬性

26 scriptdom.setattribute("src", url);

27//

在window系統上建立乙個**函式用來接受資料

28 window[options.callbackname] = (res) => else38}

39//

動態建立script標記,錯誤的監聽

40 scriptdom.addeventlistener('error', () =>);

4546

})47 }

呼叫方式

1

express的**展示

1 const url = require("url")

23 router.get("/api", (req, res, next) => =opj;

10//

如果這個**函式存在證明是jsonp請求

11if

(callback) );

16res.send(`$($)`)17}

18 })

egg框架就不需要這麼麻煩了 利用中介軟體可以直接出來

router.get("/api",jsonp,controller.index.api)

//注意不要寫成下面這種

////

router.get("/api",jsonp(),controller.index.api)

}controller/index **

const =require("egg");

class index extends controller

}}module.exports=index;

本文githup位址  

封裝JSONP 函式,方便請求傳送

封裝jsonp的 和封裝ajax的 非常的相似!可以參照食用偶!點選我傳送請求!點選我傳送請求!點選我傳送請求!點選我傳送請求!點選我傳送請求!伺服器端 的優化 接收客戶端傳遞過來的函式名稱 const fnname req.query.callback 將函式名稱對應的函式呼叫 返回給客戶端!co...

封裝乙個JSONP請求

首先,先介紹下jsonp的跨域原理 1 動態建立script標籤 2 利用 script 的src屬性,會自動傳送請求 3 只需要將要請求的位址設定為 script標籤的src屬性的值 4 需要服務端的介面配合,必須返回 jsonp 格式的資料才行 注意 1 需要有個支援 jsonp 請求的介面位址...

Swift之網路請求框架封裝

該篇文章內容大致都是說明內容,無 模組 在專案開發過程中,經常會使用到第三方的框架,最多的無非是網路請求框架 afn asi 還有使用swift寫的alamofire框架 如果將這些第三方框架的請求放置在controller中,在更換第三方框架時,整個框架都將在報錯。所以在開發過程中,要對第三方框架...