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.

1require('es6-promise').polyfill();

Usage

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

Fetch JSONP in simple way

1fetchJsonp('/users.jsonp')
2  .then(function(response) {
3    return response.json()
4  }).then(function(json) {
5    console.log('parsed json', json)
6  }).catch(function(ex) {
7    console.log('parsing failed', ex)
8  })

Set JSONP callback parameter name, default is 'callback'

1fetchJsonp('/users.jsonp', {
2    jsonpCallback: 'custom_callback',
3  })
4  .then(function(response) {
5    return response.json()
6  }).then(function(json) {
7    console.log('parsed json', json)
8  }).catch(function(ex) {
9    console.log('parsing failed', ex)
10  })

Set JSONP callback function name, default is a random number with json_ prefix

1fetchJsonp('/users.jsonp', {
2    jsonpCallbackFunction: 'function_name_of_jsonp_response'
3  })
4  .then(function(response) {
5    return response.json()
6  }).then(function(json) {
7    console.log('parsed json', json)
8  }).catch(function(ex) {
9    console.log('parsing failed', ex)
10  })

Set JSONP request timeout, default is 5000ms

1fetchJsonp('/users.jsonp', {
2    timeout: 3000,
3  })
4  .then(function(response) {
5    return response.json()
6  }).then(function(json) {
7    console.log('parsed json', json)
8  }).catch(function(ex) {
9    console.log('parsing failed', ex)
10  })

Difference between jsonpCallback and jsonpCallbackFunction

There two functions can easily be confused with each other, but there is a clear distinction.

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:

1fetchJsonp('/users.jsonp', {
2  jsonpCallback: 'cb'
3})

The request url will be /users.jsonp?cb=jsonp_1497658186785_39551, and the server should respond with a function like:

1jsonp_1497658186785_39551(
2  { ...data here... }
3)

Case 2:

1fetchJsonp('/users.jsonp', {
2  jsonpCallbackFunction: 'search_results'
3})

The request url will be /users.jsonp?callback=search_results, and the server should always respond with a function named search_results like:

1search_results(
2  { ...data here... }
3)

Caveats

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

Latest ✔	Latest ✔	8+ ✔	Latest ✔	6.1+ ✔

License

MIT

Acknowledgement

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