JSONP is NOT supported in standard Fetch API, https://fetch.spec.whatwg.org. fetch-jsonp provides you the API to execute JSONP requests that is similar to native Fetch API. This library has been inspired by fetch-jsonp.

Installation

You can install with npm.

npm install fetch-jsonp

Usage

The fetchJsonp function supports ONLY GET HTTP method.

Fetch JSONP in simple way

import fetchJsonp from 'fetch-jsonp';

const fetch = fetchJsonp();

fetch('/some-jsonp-url')
.then(function(response) {
  return response.json();
})
.then(function(json) {
  console.log('json response', json);
})
.catch(function(ex) {
  console.log('failed', ex);
});

Set JSONP request timeout, default is 5000 ms

import fetchJsonp from 'fetch-jsonp';

const fetch = fetchJsonp();

fetch('/some-jsonp-url', {timeout: 3000})
.then(function(response) {
  return response.json();
})
.then(function(json) {
  console.log('json response', json);
})
.catch(function(ex) {
  console.log('failed', ex);
});

NOTE: timeout option is not supported in the native Fetch API.

Set JSONP callback parameter name, default is callback

import fetchJsonp from 'fetch-jsonp';

const fetch = fetchJsonp();

fetch('/some-jsonp-url', {jsonp: 'cb'})
.then(function(response) {
  return response.json();
})
.then(function(json) {
  console.log('json response', json);
})
.catch(function(ex) {
  console.log('failed', ex);
});

Passing Promise implementation, default is window.Promise, make sure you pass custom implementation if the browser doesn't support ES6 Promise.

import fetchJsonp from 'fetch-jsonp';

const fetch = fetchJsonp({Promise: CustomPromise});

fetch('/some-jsonp-url')
.then(function(response) {
  return response.json();
})
.then(function(json) {
  console.log('json response', json);
})
.catch(function(ex) {
  console.log('failed', ex);
});

Caveats

You need to call response.json() before processing the JSON data. This is required to be consistent with Fetch API.

Browser Support

Chrome	Firefox	IE	Opera	Safari
Latest ✔	Latest ✔	9+ ✔	Latest ✔	6.1+ ✔