Fetch JSONP
JSONP is NOT supported in standard Fetch API, https://fetch.spec.whatwg.org.
fetch-jsonp provides you same API to fetch JSONP like native Fetch, also comes
with global fetchJsonp
function.
If you need a fetch
polyfill for old browsers, try github/fetch.
Installation
You can install with npm
.
npm install fetch-jsonp
Promise Polyfill for IE
IE8/9/10/11 does not support ES6 Promise, run this to polyfill the global environment at the beginning of your application.
require('es6-promise').polyfill();
Usage
JSONP only supports GET method, same as fetch-jsonp
.
Fetch JSONP in simple way
fetchJsonp('/users.jsonp')
.then(function(response) {
return response.json()
}).then(function(json) {
console.log('parsed json', json)
}).catch(function(ex) {
console.log('parsing failed', ex)
})
Set JSONP callback parameter name, default is 'callback'
fetchJsonp('/users.jsonp', {
jsonpCallback: 'custom_callback',
})
.then(function(response) {
return response.json()
}).then(function(json) {
console.log('parsed json', json)
}).catch(function(ex) {
console.log('parsing failed', ex)
})
json_
prefix
Set JSONP callback function name, default is a random number with fetchJsonp('/users.jsonp', {
jsonpCallbackFunction: 'function_name_of_jsonp_response'
})
.then(function(response) {
return response.json()
}).then(function(json) {
console.log('parsed json', json)
}).catch(function(ex) {
console.log('parsing failed', ex)
})
Set JSONP request timeout, default is 5000ms
fetchJsonp('/users.jsonp', {
timeout: 3000,
})
.then(function(response) {
return response.json()
}).then(function(json) {
console.log('parsed json', json)
}).catch(function(ex) {
console.log('parsing failed', ex)
})
jsonpCallback
and jsonpCallbackFunction
Difference between There two functions can easily be confused with each other, but there is a clear distinction.
Default values are
-
jsonpCallback
, default value iscallback
. It's the name of the callback parameter -
jsonpCallbackFunction
, default value isnull
. It's the name of the callback function. In order to make it distinct, it's a random string withjsonp_
prefix likejsonp_1497658186785_39551
. Leave it blank if it's set by the server, set it explicitly if the callback function name is fixed.
Case 1:
fetchJsonp('/users.jsonp', {
jsonpCallback: 'cb'
})
The request url will be /users.jsonp?cb=jsonp_1497658186785_39551
, and the server should respond with a function like:
jsonp_1497658186785_39551(
{ ...data here... }
)
Case 2:
fetchJsonp('/users.jsonp', {
jsonpCallbackFunction: 'search_results'
})
The request url will be /users.jsonp?callback=search_results
, and the server should always respond with a function named search_results
like:
search_results(
{ ...data here... }
)
Caveats
.then(function(response) { return response.json(); })
in order to keep consistent with Fetch API.
1. You need to call Uncaught SyntaxError: Unexpected token :
error
2. More than likely, you are calling a JSON api, which does not support JSONP. The difference is that JSON api responds with an object like {"data": 123}
and will throw the error above when being executed as a function. On the other hand, JSONP will respond with a function wrapped object like jsonp_123132({data: 123})
.
Browser Support
Latest |
Latest |
8+ |
Latest |
6.1+ |
License
MIT
Acknowledgement
Thanks to github/fetch for bring Fetch to old browsers.