首先介紹下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中,在更換第三方框架時,整個框架都將在報錯。所以在開發過程中,要對第三方框架...