fetch-jsonp

WebJar for fetch-jsonp

License

License

MIT
Categories

Categories

JSON Data
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

fetch-jsonp
Last Version

Last Version

1.1.3
Release Date

Release Date

Type

Type

jar
Description

Description

fetch-jsonp
WebJar for fetch-jsonp
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/camsong/fetch-jsonp

Download fetch-jsonp

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/fetch-jsonp/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>fetch-jsonp</artifactId>
    <version>1.1.3</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/fetch-jsonp/
implementation 'org.webjars.npm:fetch-jsonp:1.1.3'
// https://jarcasting.com/artifacts/org.webjars.npm/fetch-jsonp/
implementation ("org.webjars.npm:fetch-jsonp:1.1.3")
'org.webjars.npm:fetch-jsonp:jar:1.1.3'
<dependency org="org.webjars.npm" name="fetch-jsonp" rev="1.1.3">
  <artifact name="fetch-jsonp" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='fetch-jsonp', version='1.1.3')
)
libraryDependencies += "org.webjars.npm" % "fetch-jsonp" % "1.1.3"
[org.webjars.npm/fetch-jsonp "1.1.3"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

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 jsonCallbackFunction

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
  • jsonCallbackFunction, 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.

Versions

Version
1.1.3