現(xiàn)在流行的axios庫(kù)不支持jsonp,因此這里推薦一個(gè)jsonp庫(kù),簡(jiǎn)單易用。以下是介紹:
Easy JSONPA minimal and lightweight JSONP implementation which is used to be a kind of cross domain solutions.
FeaturesImplement JSONP request from the browser
Combine URL query parameters by default behavior
Support the [Promise] API
Limit JSONP request period
Handle network error response
Install# using npm npm i easy-jsonp
# using yarn yarn add easy-jsonp
# using script targetUsage
JSONP only support GET methods, same as easy-JSONP.
The code below show you how to use package as a dependency
// as a request dependency named jsonp import jsonp from "easy-jsonp" const jsonp = require("easy-jsonp").default
jsonp({ url: "http://localhost", // global function named `callback` will be invoked when JSONP response callback: "callback", // any different name from request module timeout: 3000, params: { // eg. ?key0=0&key1=1... key0: 0, key1: 1 } }) .then(res => console.log(res)) .catch(err => console.error(err))
?? Notice: Parameter callback value MUST NOT be same as request module name (eg. dependency named jsonp above code), otherwise request module only works once and function named value of parameter callback will be reset to null (internal implementation) which means the same name request module will be also reset unexpectedly.
For more customization capability, This package wouldn"t convert callback to a new name to prevent unexpected reset.
jsonp({ // custom configuration })
?? Notice: For same reason, parameter callback value MUST NOT be jsonp.
Parametersoptions parameter | type | required | description |
---|---|---|---|
url | String | true | JSONP request address |
timeout | Number | false, default : 6000 milliseconds | how long after timeout error is emitted. 0 to disable |
callback | String | false, default : "jsonpCallback"+Date.now() | global callback function name which is used to handle JSONP response. |
params | Object | false, default: {} | other parameters in query string parameters |
Uncaught SyntaxError: Unexpected token :error
It mostly doesn"t support JSONP request when you are calling a JSON api. The difference between JSON api and JSONP is that JSON api response with an object like { num: 1 } (It will throw a error when client executed this response as a function. ). On the other hand, JSONP will respond with a function wrapped object like callback({ num: 1 }) and we will get what we need when client executed this response as a function.
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/98065.html
摘要:結(jié)果證明,對(duì)于以上瀏覽器,在生產(chǎn)環(huán)境使用是可行的。后面可以跟對(duì)象,表示等待才會(huì)繼續(xù)向下執(zhí)行,如果被或拋出異常則會(huì)被外面的捕獲。,,都是現(xiàn)在和未來(lái)解決異步的標(biāo)準(zhǔn)做法,可以完美搭配使用。這也是使用標(biāo)準(zhǔn)一大好處。只允許外部傳入成功或失敗后的回調(diào)。 showImg(https://cloud.githubusercontent.com/assets/948896/10188666/bc9a53...
摘要:官網(wǎng)地址聊天機(jī)器人插件開(kāi)發(fā)實(shí)例教程一創(chuàng)建插件在系統(tǒng)技巧使你的更加專業(yè)前端掘金一個(gè)幫你提升技巧的收藏集。我會(huì)簡(jiǎn)單基于的簡(jiǎn)潔視頻播放器組件前端掘金使用和實(shí)現(xiàn)購(gòu)物車(chē)場(chǎng)景前端掘金本文是上篇文章的序章,一直想有機(jī)會(huì)再次實(shí)踐下。 2道面試題:輸入U(xiǎn)RL按回車(chē)&HTTP2 - 掘金通過(guò)幾輪面試,我發(fā)現(xiàn)真正那種問(wèn)答的技術(shù)面,寫(xiě)一堆項(xiàng)目真不如去刷技術(shù)文章作用大,因此刷了一段時(shí)間的博客和掘金,整理下曾經(jīng)被...
摘要:本文詳細(xì)講述如何使用原生和來(lái)實(shí)現(xiàn)。使用可以無(wú)刷新地向服務(wù)端發(fā)送請(qǐng)求接收服務(wù)端響應(yīng),并更新頁(yè)面。分別要用到的方法和方法。,,都是現(xiàn)在和未來(lái)解決異步的標(biāo)準(zhǔn)做法,可以完美搭配使用。這也是使用標(biāo)準(zhǔn)一大好處。 本文詳細(xì)講述如何使用原生 JS、jQuery 和 Fetch 來(lái)實(shí)現(xiàn) AJAX。 AJAX 即 Asynchronous JavaScript and XML,異步的 JavaScript...
首先聲明一下,本文不是要講解fetch的具體用法,不清楚的可以參考MDN fetch教程。 引言 說(shuō)道fetch就不得不提XMLHttpRequest了,XHR在發(fā)送web請(qǐng)求時(shí)需要開(kāi)發(fā)者配置相關(guān)請(qǐng)求信息和成功后的回調(diào),盡管開(kāi)發(fā)者只關(guān)心請(qǐng)求成功后的業(yè)務(wù)處理,但是也要配置其他繁瑣內(nèi)容,導(dǎo)致配置和調(diào)用比較混亂,也不符合關(guān)注分離的原則;fetch的出現(xiàn)正是為了解決XHR存在的這些問(wèn)題。例如下面代碼: f...
摘要:同源策略是處于對(duì)用戶安全的考慮,如果非同源就會(huì)受到以下限制不能讀取無(wú)法獲得請(qǐng)求不能發(fā)送但是事實(shí)是經(jīng)常需要借助非同源來(lái)提供數(shù)據(jù),所以就需要進(jìn)行跨域請(qǐng)求。 什么是跨域 注:本文完整示例地址先來(lái)說(shuō)一個(gè)概念就是同源,同源指的是協(xié)議,端口,域名全部相同。 同源策略(Same origin policy)是一種約定,它是瀏覽器最核心也最基本的安全功能,如果缺少了同源策略,則瀏覽器的正常功能可能都會(huì)...
閱讀 1052·2021-11-22 09:34
閱讀 2251·2021-11-11 16:54
閱讀 2278·2021-09-27 14:00
閱讀 995·2019-08-30 15:55
閱讀 1584·2019-08-29 12:46
閱讀 662·2019-08-26 18:42
閱讀 775·2019-08-26 13:31
閱讀 3274·2019-08-26 11:52