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.

1.3.0 / 2023-7-6

• allow applications to set crossorigin attribute, thanks to @stfsy

1.2.3 / 2022-9-13

• Set values of options to be optional, thanks to @timothy-bailey-redbox

1.2.1 / 2021-8-17

• Add referrerPolicy support, thanks to @kukushouhou #62

1.2.0 / 2021-8-16

• Add nonce support, thanks to @tanzhangwen #57

1.1.1 / 2017-6-10

• Fix script error when script request error, thanks to @wheatma

1.1.0 / 2017-6-7

• Handle <script> error event, thanks to @michaelvial

1.0.7 / 2017-5-25

• support custom charset on script
• fix docs: properly document how to use jsonCallback and jsonpCallbackFunction options

1.0.6 / 2017-2-3

• update typescript config

1.0.5 / 2016-12-29

• update typescript support

1.0.4 / 2016-12-23

• add typescript support

1.0.3 / 2016-12-04

• add examples index-ie8.html
• remove es6-promise dependent

1.0.2 / 2016-09-26

• Use original url when Request error

1.0.1 / 2016-08-14

• Format code
• Update Readme

1.0.0 / 2015-11-19

• Remove Bower support
• Add jsonpCallback and jsonpCallbackFunction as options

0.9.2 / 2015-08-11

• Remove global export of fetchJsonp

0.9.1 / 2015-08-11

• Update removeScript fix legacy IE