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

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

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

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:

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

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.

Current Tags

1.2.3 ... latest (3 years ago)