Multiple jsonp Ajax Call with jQuery deferred method $.when

问题

I have a simple ajax function:

function GetJsonData(api) {

 return (
 $.ajax({
 type: 'GET',
 jsonpCallback: 'callback',
 url: api,
 dataType: 'jsonp'

 }));
}

and now when I tried to do multiple calls like this:

 $.when(
 GetJsonData("api"),
 GetJsonData("api"),
 GetJsonData("api"),
 GetJsonData("api"),
 GetJsonData("api")
 )
 .done(function (data1, data2, data3, data4, data5) {
 alert("success");

 })
 .fail(function () {
 alert("fail");
 });

Each time when I do calls like above, I mostly get Failed alert. Only sometime I get Success alert.

But when I do not more than 2 calls at same time in $.when, then I will always get Success alert.

Can anyone please help me to find out where I m wrong in the above code snippets? OR I have to use another approach to make the above function work properly.

回答1:

The problem is that you're forcing jQuery to use a specific JSONP callback function name, callback, with this option:

jsonpCallback: 'callback'

So if you have overlapping JSONP calls, jQuery will try to use the same function on your page to handle the result of each of them, and remove the function once it's done its job for a request. This is obviously a bit of a problem, the requests stomp on each other.

Remove that option and allow jQuery to create its own function name. It will ensure the function name is unique to each request.

In the comments below you've said:

When I remove the jsopCllback parameter I mreceving this error in browser ReferenceError: callback is not defined

and that what you see come back when you remove the jsonpCallback: 'callback' argument is:

callback( { "status": 0, "item": 20, "contents": [ { "new1": 196, "new2": 1, "new3": 2, "new4": "abcd", "new5": 41, "new6": "aadsa", } ] }

That means JSONP service you're talking to uses a non-standard query string argument name for the name to give the callback, and so it's ignoring the standard one that jQuery uses. You'll have to find out what argument name they expect the callback name in, and use the jsonp: 'argNameTheyUse' option for ajax.

The standard argument name is callback, e.g.:

http://example.com/getsomething?callback=foo

...means to use the callback name foo. But some APIs use a different argument, such as:

http://example.com/getsomething?mySpecialCallbackArg=foo

If you were calling that endpoint, you'd need the jsonp: 'mySpecialCallbackArg' option on ajax.

In the further comments, you say you can't point to the API documentation becuase it's "private." If it's "private" as in it's something you or your company control, then great, fix it so it respects the callback query string argument and uses that as the function name in the JSONP response. That's how JSONP is meant to work.

E.g., if you send it this request:

http://example.com/getsomething?callback=foo

...have the code generating the response use foo as the JSONP callback name:

foo({
   "data": "here"
})

If the query is:

http://example.com/getsomething?callback=bar

Then use bar instead:

bar({
   "data": "here"
})

That way, when you make multiple overlapping calls, jQuery can give a unique function to each of them, and they don't end up stepping on each other.

If for some reason you can't do that (?!), then you'll have to make your calls in series (one after another) instead of in parallel.

回答2:

it may happen because you are calling multiple ajax call parallelly and ajax is asynchronous.

来源：https://stackoverflow.com/questions/16605890/multiple-jsonp-ajax-call-with-jquery-deferred-method-when

标签

jquery

ajax

jsonp