camsong / fetch-jsonp Goto Github PK
View Code? Open in Web Editor NEWMake JSONP request like window.fetch
Make JSONP request like window.fetch
I am not sure why this library does not work with a url from AirBnB. I have posted a question about it in StackOverflow.
http://stackoverflow.com/questions/42869123/jsonp-uncaught-referenceerror
The documentation refers to jsonCallbackFunction
however the parameter is actually named jsonpCallbackFunction
(note additional p
) in code.
I had to figure out by reading the code, otherwise following the README, it wouldn't work.
:two-cents:
Hi guys,
New to jsonp - but Im using it to fetch a list of options for an autocomplete input - so as a user types we send the value to the endpoint - and depending on how fast they type, we may end up with a half dozen requests within the default 5000ms timeout for the first request - and from what I can see, only the latest request ends up getting a response - and the others timeout.
Other than throttling the requests from the front end - is there a better way to handle these silent aborts?
Any advice appreciated!
Hello,
First of all, thank you for your work.
I was wondering if it's possible to catch a "location" header in the response or a redirect ? Because for now I got a time-out response whereas having the redirect.
Thank you :)
I tried installing this package as I need it to make calls to the Instagram API, but on an npm install
I get the following errors:
0 info it worked if it ends with ok
1 verbose cli [ '/Users/reinierkaper/.nvm/versions/node/v4.8.2/bin/node',
1 verbose cli '/Users/reinierkaper/.nvm/versions/node/v4.8.2/bin/npm',
1 verbose cli 'install',
1 verbose cli '--save',
1 verbose cli 'fetch-jsonp' ]
2 info using [email protected]
3 info using [email protected]
4 silly install loadCurrentTree
5 silly install readLocalPackageData
6 http fetch GET 200 https://registry.npmjs.org/fetch-jsonp 232ms
7 silly pacote range manifest for fetch-jsonp@^1.0.6 fetched in 270ms
8 silly install loadIdealTree
9 silly install cloneCurrentTreeToIdealTree
10 silly install loadShrinkwrap
11 verbose stack SyntaxError: Unexpected token <
11 verbose stack at Object.parse (native)
11 verbose stack at module.exports (/Users/reinierkaper/.nvm/versions/node/v4.8.2/lib/node_modules/npm/lib/utils/parse-json.js:3:15)
11 verbose stack at /Users/reinierkaper/.nvm/versions/node/v4.8.2/lib/node_modules/npm/lib/install/read-shrinkwrap.js:31:20
11 verbose stack at tryCatcher (/Users/reinierkaper/.nvm/versions/node/v4.8.2/lib/node_modules/npm/node_modules/bluebird/js/release/util.js:16:23)
11 verbose stack at Holder$3._callFunction (eval at <anonymous> (/Users/reinierkaper/.nvm/versions/node/v4.8.2/lib/node_modules/npm/node_modules/bluebird/js/release/join.js:1:0), <anonymous>:14:44)
11 verbose stack at Holder$3.checkFulfillment (eval at <anonymous> (/Users/reinierkaper/.nvm/versions/node/v4.8.2/lib/node_modules/npm/node_modules/bluebird/js/release/join.js:1:0), <anonymous>:29:30)
11 verbose stack at Promise.eval (eval at <anonymous> (/Users/reinierkaper/.nvm/versions/node/v4.8.2/lib/node_modules/npm/node_modules/bluebird/js/release/join.js:1:0), <anonymous>:6:20)
11 verbose stack at Promise._settlePromise (/Users/reinierkaper/.nvm/versions/node/v4.8.2/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:566:21)
11 verbose stack at Promise._settlePromise0 (/Users/reinierkaper/.nvm/versions/node/v4.8.2/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:614:10)
11 verbose stack at Promise._settlePromises (/Users/reinierkaper/.nvm/versions/node/v4.8.2/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:693:18)
11 verbose stack at Promise._fulfill (/Users/reinierkaper/.nvm/versions/node/v4.8.2/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:638:18)
11 verbose stack at Promise._settlePromise (/Users/reinierkaper/.nvm/versions/node/v4.8.2/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:582:21)
11 verbose stack at Promise._settlePromise0 (/Users/reinierkaper/.nvm/versions/node/v4.8.2/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:614:10)
11 verbose stack at Promise._settlePromises (/Users/reinierkaper/.nvm/versions/node/v4.8.2/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:693:18)
11 verbose stack at Promise._fulfill (/Users/reinierkaper/.nvm/versions/node/v4.8.2/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:638:18)
11 verbose stack at /Users/reinierkaper/.nvm/versions/node/v4.8.2/lib/node_modules/npm/node_modules/bluebird/js/release/nodeback.js:42:21
12 verbose cwd /Users/reinierkaper/projects/docker/canvaspop
13 verbose Darwin 16.6.0
14 verbose argv "/Users/reinierkaper/.nvm/versions/node/v4.8.2/bin/node" "/Users/reinierkaper/.nvm/versions/node/v4.8.2/bin/npm" "install" "--save" "fetch-jsonp"
15 verbose node v4.8.2
16 verbose npm v5.0.0
17 error Unexpected token <
18 verbose exit [ 1, true ]
Any help would be appreciated.
It’s a demo written by myself. As a result, this problem occurs after using fetch-jsonp to cross domains, but the data is returned normally, the console will report this error
Uncaught (in promise) Error: JSONP request to http://localhost:8081/movie/in_theaters?start=0&count=14 timed out
at eval (fetch-jsonp.js:80)
https://github.com/camsong/fetch-jsonp/blob/master/index.d.ts#L7
It should return Promise not Function
请问fetch-jsonp如何使用post?
I use fetch-ie8 on an app based on react, and I apply CORS FETCH on this app, the fetch request always fails on IE9 ( the problem is 拒绝访问 Access denied ) , if I wanna insist on CORS FETCH, does it mean I have to use fetch-jsonp? Is there any better way?
p.s.
I've read your blog on camsong/blog#2 , great job!
I can get this error line at the consol: The script from “https://blabla.com” was loaded even though its MIME type (“application/json”) is not a valid JavaScript MIME type. How can ı fix it?
So I've encountered endpoints that require the callback parameter to be first in the url query. The way you're doing it now, the callback always ends up last. My suggestion would be to allow choosing at what position it gets inserted, or always place it first directly after the "?".
If I find the time I will make a pull-request.
Currently, if the request fails, it just gets classified as a timeout. Is there any plans to handle 400 errors?
Hi there, thanks for this awesome library.
I'm having trouble using your library while adding a header.
First what I usually do using jQuery:
$.ajax({ url : 'https://api.imgur.com/3/gallery/t/cats/45', type : 'GET', dataType: 'json', headers: { Authorization: 'Client-ID ' + IMGUR_API_CLIENT_ID }, success: function(json) { for (let item of json.data.items) { console.log(item); } });
and now using fetchJsonp:
`let galleryURL = 'https://api.imgur.com/3/gallery/t/cats/45';
fetchJsonp(galleryURL, {
url: galleryURL,
method: 'get',
dataType: 'json',
headers: {
Authorization: 'Client-ID ' + IMGUR_API_CLIENT_ID
}
}).then(function(response) {
return response.json();
}).then(function(json) {
console.log(json);
});`
Can you help me, am I doing something wrong? Are headers supported by fetch-jsonp?
Thanks a lot
Edit: I'm using this combined with aurelia,js and I'm getting a
"Unhandled rejection Error: JSONP request to https://api.imgur.com/3/gallery/t/cats/45 timed out"-Error
Uncaught ReferenceError: jsonp_1503978517953_53960 is not defined
因为 timeout 后 function 被 reomve 导致返回后的函数执行出错
I want to use abort function, like standard Fetch
see signal api at
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
abortController = new AbortController()
signal = abortController.signal
fetch( url, {signal})
I want to use same as fetchjsonp( url, {signal})
How to do that?
Currently the only supported module format is UMD. Unfortunately this adds a few paths that might be unexpected for a bundled ESM app.
Can we have a build in ESM module format in addition to the current UMD format? An ESM module should be declared in package.json
in attribute module
.
Hi. Library has worked great so far, but does not respect a nonce value so our Urls cannot be added to the page. i.e. when the nonce value is set, every script added to the page must use the known nonce value.
Ideally we need this added:
if (options.nonce) {
jsonpScript.setAttribute('nonce', options.nonce);
}
Thanks!
Tyler
ReferenceError: window is not defined
I tried this on IE and it is giving a console error of Promise not defined. I only tried on IE 10 and 11. It is working on every other browser though.
[ts] Could not find a declaration file for module 'fetch-jsonp'. '/Users/jere/jm/jumei-sdk/node_modules/fetch-jsonp/build/fetch-jsonp.js' implicitly has an 'any' type.
ERROR in /Users/jere/jm/jumei-sdk/node_modules/fetch-jsonp/index.d.ts (1,73): error TS2304: Cannot find name 'Promise'.
import * as jsonp from 'fetch-jsonp'
console.log(jsonp) //{default: undefined}
so, how to import it?
404 Why 'catch' can't catch?
I'm probably doing something wrong.
I have this:
fetchJsonp(url, {
timeout: 3000,
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)
});
But I'm getting this error:
Uncaught SyntaxError: Unexpected token :
on my fetched URL.
Thank you!
I met problem "Uncaught SyntaxError: Unexpected token : error", how could solve this?
PR #65 has introduced a breaking change to the typing. nonce
and referrerPolicy
should be optional but have been listed as required fields on the options type. It should be possible to not specify these values.
HI, I am trying to get the fetch-jsonp to work on IE9 without any success. Is there a way you can provide a working example please? I think promises are not supported by IE9 whihc makes this modules not work in IE9. can you provide a simple example please?
I'm using fetchJsonp like so to access data on a resource which I have no control of...
fetchJsonp(url, {
method: 'GET',
mode: 'no-cors',
credentials: 'include',
})
.then(function (data) {
return data.json();
})
.then(function (response) {
$scope[dateTime] = new Date(response.timestamp * 1000).toLocaleString();
// ... more code
However, due to fetchJsonp adding a callback query string on the request URL, my request fails:
Error: JSONP request to https://resource.com/api/param1/param1 timed out at fetch-jsonp.js:85
Actual network request:
https://resource.com/api/param1/param1?callback=jsonp_1514919479266_12080
Is there a way for me to remove the callback on the request url due to this case?
the interface may return data in this form:
var jsonp_123 = xxx
Hello,
The given URL is updated to include a '?' or '&' which is added so that the callback can be appended correctly. Upon errors, the reject(new Error(
JSONP request to ${url} timed out));
will include the character that was added. This isn't a big deal but at first made me think a URL might be wrong because of the additional character. I think a quick fix to return an unmodified original URL during error messages would be beneficial.
I am getting error as this in console.
Refused to execute script from 'https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en&callback=jsonp_1500375938057_49602' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.
Could you please let me know a solution ?
in my options, jsonp only supports get method via add script to implement cors
i am not sure if the description is right "The fetch-jsonp function supports any HTTP method. We'll focus on GET and POST example requests."
Does it support react native?How to use jsonp in react native?
Each "fetchJsonp" request will be sent out, Will clearTimeout the last timeoutId check?
You look at my changes. https://github.com/river-lee/fetch-jsonp/blob/master/src/fetch-jsonp.js
Noticed the link to your repository is wrong here:
Hi there,
I'm using fetch-jsonp to fecth some JSON, but Firefox is blocking my request and throw this message in the console.
The resource from “http://xxxxxxxxxxxxxxx&custom_callback=jsonp_1488599283507_98115” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
Is there any work-around ? Or am I screwed ?
Thanks
Hello:
How can I use your script to fetch a URL which response will be a string of characters from a remote server, which otherwise could not work under the usual method.
sample response:
artist - track title (album)
Regards
Thanks for the library!
With the following JSONP response (script body) from Mailchimp:
jsonp_1720618209454_25752({"result":"error","msg":"Too many subscribe attempts for this email address. Please try again in about 5 minutes. (#6592)"})jsonp_1720618209454_25752({"result":"error","msg":"[email protected] is an invalid email address and cannot be imported."})
fetch-jsonp
times out, with the message (details sanitized):
Error: JSONP request to https://xxx.us20.list-
manage.com/subscribe/post-json?u=xxx&id=xxx&EMAIL=abc%40gmail.co timed out
Looking in the DevTools console, it appears that the problem happened because of the jsonp_1720618209454_25752
following directly after the closing parenthesis:
Uncaught SyntaxError: Unexpected identifier 'jsonp_1720618209454_25752'
I try to consume an API that returns a function called jsonCallback,
I put the following code and return the error
var fetchJsonp = require("fetch-jsonp") fetchJsonp("http://opendata.euskadi.eus/contenidos/ds_recursos_turisticos/albergues_de_euskadi/opendata/alojamientos.json", { jsonpCallback: 'jsonCallback', }) .then(function(response) { return response.json() }).then(function(json) { console.log('parsed json', json) }).catch(function(ex) { console.log('parsing failed', ex) })
If I look in the header of the request, I see that it happens as a parameter a random callback function.
I'm probably doing something wrong,
Some solution or idea.
Thank you
I tried executing a wikipedia rest api call from chrome using the fetch-jsonp because regular fetch caused a cross origin issue and was not allowed, but I am getting the an error message
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.