# fetch-jsonp

> Fetch JSONP like a boss using Fetch API

Latest version **1.4.0** (published 2026-02-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install fetch-jsonp
pnpm add fetch-jsonp
yarn add fetch-jsonp
bun add fetch-jsonp
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.4.0 |
| Published | 2026-02-27 |
| First published | 2015-08-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1000 |
| Author | Cam Song |
| Maintainers | camsong |
| Keywords | fetch, jsonp, github fetch, ajax |

## Links

- npm: https://www.npmjs.com/package/fetch-jsonp
- Repository: https://github.com/camsong/fetch-jsonp
- Homepage: https://github.com/camsong/fetch-jsonp#readme
- Issues: https://github.com/camsong/fetch-jsonp/issues
- npm.io page: https://npm.io/package/fetch-jsonp

## Alternatives

- [launchdarkly-js-client-sdk](https://npm.io/package/launchdarkly-js-client-sdk.md) — 2.5M weekly downloads
- [@elastic/elasticsearch](https://npm.io/package/@elastic/elasticsearch.md) — 2.1M weekly downloads
- [@c8y/client](https://npm.io/package/@c8y/client.md) — 15.3K weekly downloads
- [@signaldb/maverickjs](https://npm.io/package/@signaldb/maverickjs.md) — 1.7K weekly downloads
- [@bbc/http-transport-cache](https://npm.io/package/@bbc/http-transport-cache.md) — 1.2K weekly downloads

## Recent versions

- 1.4.0 (latest) — 2026-02-27
- 1.3.0 — 2023-07-06
- 1.2.3 — 2022-09-13
- 1.2.2 — 2022-08-25
- 1.2.1 — 2021-08-17
- 1.2.0 — 2021-08-16
- 1.1.3 — 2017-08-31
- 1.1.2 — 2017-08-29
- 1.1.1 — 2017-06-10
- 1.1.0 — 2017-06-07
- 1.0.7 — 2017-05-25
- 1.0.6 — 2017-02-03
- 1.0.5 — 2016-12-29
- 1.0.4 — 2016-12-23
- 1.0.3 — 2016-12-04
- … 5 more at https://npm.io/package/fetch-jsonp/versions

## README

# Fetch JSONP [![Build Status](https://travis-ci.org/camsong/fetch-jsonp.svg)](https://travis-ci.org/camsong/fetch-jsonp) [![npm version](https://badge.fury.io/js/fetch-jsonp.svg)](http://badge.fury.io/js/fetch-jsonp) [![npm downloads](https://img.shields.io/npm/dm/fetch-jsonp.svg?style=flat-square)](https://www.npmjs.com/package/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](http://github.com/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](https://tc39.github.io/ecma262/#sec-promise-constructor), run this to polyfill the global environment at the beginning of your application.

```js
require('es6-promise').polyfill();
```

## Usage

JSONP only supports GET method, same as `fetch-jsonp`.

### Fetch JSONP in simple way

```javascript
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'

```javascript
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

```javascript
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

```javascript
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:
```js
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:
```js
jsonp_1497658186785_39551(
  { ...data here... }
)
```

##### Case 2:
```js
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:
```js
search_results(
  { ...data here... }
)
```

### Set fetchPriority for the JSONP script request

```javascript
fetchJsonp('/users.jsonp', {
    fetchPriority: 'high', // 'high' | 'low' | 'auto'
  })
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('parsed json', json)
  })
```

### Set crossorigin attribute

```javascript
fetchJsonp('/users.jsonp', {
    crossorigin: 'anonymous', // 'anonymous' | 'use-credentials' | true (defaults to 'anonymous')
  })
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('parsed json', json)
  })
```

### 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](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_7-8/internet-explorer_7-8_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png)
--- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | 8+ ✔ | Latest ✔ | 6.1+ ✔ |

# License

MIT

# Acknowledgement

Thanks to [github/fetch](https://github.com/github/fetch) for bring Fetch to old browsers.

---
_Source: https://npm.io/package/fetch-jsonp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._