{"id":13671865,"url":"https://github.com/camsong/fetch-jsonp","last_synced_at":"2025-05-14T16:14:38.471Z","repository":{"id":36088045,"uuid":"40388869","full_name":"camsong/fetch-jsonp","owner":"camsong","description":"Make JSONP request like window.fetch","archived":false,"fork":false,"pushed_at":"2024-07-10T13:17:23.000Z","size":96,"stargazers_count":998,"open_issues_count":4,"forks_count":157,"subscribers_count":26,"default_branch":"master","last_synced_at":"2024-10-29T15:48:38.005Z","etag":null,"topics":["jsonp","jsonp-request","polyfill"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/camsong.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-08-08T02:35:05.000Z","updated_at":"2024-08-19T16:46:12.000Z","dependencies_parsed_at":"2024-01-14T17:05:07.660Z","dependency_job_id":"1c03c491-48a9-4d07-89b9-0dce89f5c2fe","html_url":"https://github.com/camsong/fetch-jsonp","commit_stats":{"total_commits":61,"total_committers":21,"mean_commits":"2.9047619047619047","dds":0.3278688524590164,"last_synced_commit":"85d90c7e0dd7fb12f40f6eb01bb1553ed2960f58"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camsong%2Ffetch-jsonp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camsong%2Ffetch-jsonp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camsong%2Ffetch-jsonp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camsong%2Ffetch-jsonp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/camsong","download_url":"https://codeload.github.com/camsong/fetch-jsonp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248027404,"owners_count":21035594,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jsonp","jsonp-request","polyfill"],"created_at":"2024-08-02T09:01:20.559Z","updated_at":"2025-04-09T11:03:42.129Z","avatar_url":"https://github.com/camsong.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"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)\n\nJSONP is NOT supported in standard Fetch API, https://fetch.spec.whatwg.org.\nfetch-jsonp provides you same API to fetch JSONP like native Fetch, also comes\nwith global `fetchJsonp` function.\n\nIf you need a `fetch` polyfill for old browsers, try [github/fetch](http://github.com/github/fetch).\n\n## Installation\n\nYou can install with `npm`.\n\n```\nnpm install fetch-jsonp\n```\n\n## Promise Polyfill for IE\n\nIE8/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.\n\n```js\nrequire('es6-promise').polyfill();\n```\n\n## Usage\n\nJSONP only supports GET method, same as `fetch-jsonp`.\n\n### Fetch JSONP in simple way\n\n```javascript\nfetchJsonp('/users.jsonp')\n  .then(function(response) {\n    return response.json()\n  }).then(function(json) {\n    console.log('parsed json', json)\n  }).catch(function(ex) {\n    console.log('parsing failed', ex)\n  })\n```\n\n### Set JSONP callback parameter name, default is 'callback'\n\n```javascript\nfetchJsonp('/users.jsonp', {\n    jsonpCallback: 'custom_callback',\n  })\n  .then(function(response) {\n    return response.json()\n  }).then(function(json) {\n    console.log('parsed json', json)\n  }).catch(function(ex) {\n    console.log('parsing failed', ex)\n  })\n```\n\n### Set JSONP callback function name, default is a random number with `json_` prefix\n\n```javascript\nfetchJsonp('/users.jsonp', {\n    jsonpCallbackFunction: 'function_name_of_jsonp_response'\n  })\n  .then(function(response) {\n    return response.json()\n  }).then(function(json) {\n    console.log('parsed json', json)\n  }).catch(function(ex) {\n    console.log('parsing failed', ex)\n  })\n```\n\n### Set JSONP request timeout, default is 5000ms\n\n```javascript\nfetchJsonp('/users.jsonp', {\n    timeout: 3000,\n  })\n  .then(function(response) {\n    return response.json()\n  }).then(function(json) {\n    console.log('parsed json', json)\n  }).catch(function(ex) {\n    console.log('parsing failed', ex)\n  })\n```\n\n### Difference between `jsonpCallback` and `jsonpCallbackFunction`\nThere two functions can easily be confused with each other, but there is a clear distinction.\n\nDefault values are\n* `jsonpCallback`, default value is `callback`. It's the name of the callback parameter\n* `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.\n\n##### Case 1:\n```js\nfetchJsonp('/users.jsonp', {\n  jsonpCallback: 'cb'\n})\n```\nThe request url will be `/users.jsonp?cb=jsonp_1497658186785_39551`, and the server should respond with a function like:\n```js\njsonp_1497658186785_39551(\n  { ...data here... }\n)\n```\n\n##### Case 2:\n```js\nfetchJsonp('/users.jsonp', {\n  jsonpCallbackFunction: 'search_results'\n})\n```\nThe request url will be `/users.jsonp?callback=search_results`, and the server should always respond with a function named `search_results` like:\n```js\nsearch_results(\n  { ...data here... }\n)\n```\n\n### Caveats\n\n#### 1. You need to call `.then(function(response) { return response.json(); })` in order to keep consistent with Fetch API.\n\n#### 2. `Uncaught SyntaxError: Unexpected token :` error\n\nMore 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})`.\n\n## Browser Support\n\n![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)\n--- | --- | --- | --- | --- |\nLatest ✔ | Latest ✔ | 8+ ✔ | Latest ✔ | 6.1+ ✔ |\n\n# License\n\nMIT\n\n# Acknowledgement\n\nThanks to [github/fetch](https://github.com/github/fetch) for bring Fetch to old browsers.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcamsong%2Ffetch-jsonp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcamsong%2Ffetch-jsonp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcamsong%2Ffetch-jsonp/lists"}