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.

`js
require('es6-promise').polyfill();
`

Usage

JSONP only supports GET method, same as fetch-jsonp.

$3

`javascript
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)
})
`

$3

`javascript
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)
})
`

$3

`javascript
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)
})
`

$3

`javascript
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)
})
`

$3

Default values are
* jsonpCallback, default value is callback. It's the name of the callback parameter
* jsonpCallbackFunction, default value is null. It's the name of the callback function. In order to make it distinct, it's a random string with jsonp_ prefix like jsonp_1497658186785_39551. Leave it blank if it's set by the server, set it explicitly if the callback function name is fixed.

##### Case 1:
`js
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:
`js
jsonp_1497658186785_39551(
{ ...data here... }
)
`

##### Case 2:
`js
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:
`js
search_results(
{ ...data here... }
)
`

$3

#### 1. You need to call .then(function(response) { return response.json(); }) in order to keep consistent with Fetch API.

#### 2. Uncaught SyntaxError: Unexpected token : error

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

!Chrome | !Firefox | !IE | !Opera | !Safari
--- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | 8+ ✔ | Latest ✔ | 6.1+ ✔ |

License

MIT

Acknowledgement

Thanks to github/fetch for bring Fetch to old browsers.