Better JSONP

A minimal and lightweight JSONP implementation which is used to be a kind of cross domain solutions.

• See demo page

• Play on the playground

Features

• Implement JSONP request from the browser

• Combine URL query parameters by default behavior

• Support the Promise API

• Limit JSONP request period

• Handle network error response

Install

# using npm
npm i better-jsonp

# using yarn
yarn add better-jsonp

<!-- using CDN -->
<!-- recommend you to add version number to url ending. eg.https://unpkg.com/[email protected] -->
<script src="https://unpkg.com/better-jsonp@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/better-jsonp@latest"></script>

Promise polyfill

If your browser doesn't support ES6 Promise, you should import polyfill to the global environment at the beginning of your application.

require('es6-promise').polyfill()

Notice: Don't assign the result of polyfill() to any variable.

Usage

JSONP only support GET methods, same as better-JSONP.

• The code below show you how to use package as a dependency

// as a request dependency named jsonp
import jsonp from 'better-jsonp'

jsonp({
  url: 'http://localhost',
  // global function named `callback` will be invoked when JSONP response
  jsonpCallback: 'callback', // any different name from request module
  timeout: 5000,
  // eg. ?customCallbackParams=...
  callbackParams: 'customCallbackParams',
  urlParams: {
    // eg. ?key0=0&key1=1...
    key0: 0,
    key1: 1
  }
})
  .then(res => console.log(res))
  .catch(err => console.error(err))

⚠️ Notice: Parameter jsonpCallback value MUST NOT be same as request module name (eg. dependency named jsonp above code), otherwise request module only works once and function named value of parameter jsonpCallback will be reset to null (internal implementation) which means the same name request module will be also reset unexpectedly.

For more customization capability, This package wouldn't convert jsonpCallback to a new name to prevent unexpected reset.

• You can also invoke function named jsonp directly in global environment if you have installed package from CDN.（Play on the playground）

jsonp({
  // custom configuration
})

⚠️ Notice: For same reason, parameter jsonpCallback value MUST NOT be jsonp.

Parameters

| options parameter | type | required | description | | ----------------- | ---- | -------- | ----------- | | url | String | true | JSONP request address | | timeout | Number | false, default : 6000 milliseconds | how long after timeout error is emitted. 0 to disable | | jsonpCallback | String | false, default : 'callback'+Date.now() | global callback function name which is used to handle JSONP response. | | callbackParams | String | false, default: jsonpCallback | name of query parameter to specify the callback name | | urlParams | Object | false, default: {} | other parameters in query string parameters |

Notice

• Uncaught SyntaxError: Unexpected token :error

It mostly doesn't support JSONP request when you are calling a JSON api. The difference between JSON api and JSONP is that JSON api response with an object like { num: 1 } (It will throw a error when client executed this response as a function. ). On the other hand, JSONP will respond with a function wrapped object like jsonpCallback({ num: 1 }) and we will get what we need when client executed this response as a function.