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.
You can install with npm.
npm install fetch-jsonp
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();JSONP only supports GET method, same as fetch-jsonp.
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)
})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)
})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)
})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)
})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 parameterjsonpCallbackFunction, 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.
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... }
)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... }
)1. You need to call .then(function(response) { return response.json(); }) in order to keep consistent with Fetch API.
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}).
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Latest ✔ | Latest ✔ | 8+ ✔ | Latest ✔ | 6.1+ ✔ |
MIT
Thanks to github/fetch for bring Fetch to old browsers.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent