fetch-jsonp
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/fetch-jsonp package

    1.2.1 • Public • Published

    Fetch JSONP Build Status npm version npm downloads

    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

    Chrome Firefox IE Opera Safari
    Latest Latest 8+ Latest 6.1+

    License

    MIT

    Acknowledgement

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

    Install

    npm i fetch-jsonp

    DownloadsWeekly Downloads

    55,861

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    12 kB

    Total Files

    8

    Last publish

    Collaborators

    • camsong