I would like to create a function that retrieves multiple json data simultaneously through jquery's ajax communication
Place the associative array of URLs and parameters in an array request and
getDataMultipul as much as it is stored
I'm considering creating a form to continue processing after I get everything.
when to run in parallel and
I can't think of a way to get the results all at once and put them in an array.
If you know any good way, could you please let me know?
Thank you in advance.
var request=[
{"url":"URL itself 1", "params":{parameter1}},
{"url":"URL itself 2", "params":{parameter2}},
{"url":"URL 3", "params":{parameter3}},
・・・
]
getDataMultipul(request).done(
function(data){
// Successful Action
}
.fail(function(){
// Handling on failure
});
function getJson(request,params){
vardefer=$.Deferred();
$.ajax({
url —request,
type: 'POST',
data —JSON.stringify (params),
contentType: 'application/json',
dataType: 'json',
success:defer.resolve,
error:defer.reject,
timeout —TIMEOUT
});
return prefer.promise();
}
function getDataMultipul(arr){
vardefer=$.Deferred();
$.when(
// Get data from the URL and parameters in the array
getJson(arr[0]["url"],arr[0]["params"],
getJson(arr[1]["url"],arr[1]["params"],
getJson(arr[2]["url"],arr[2]["params"],
…
.done(function(ret1,re2,re3...){
// Resolve when all the processing for the array is complete
var returns = [
ret1,
ret2,
ret3,
…
]
defer.resolve(returns);
}).fail(function(){
defer.reject();
})
return prefer.promise();
}
Additional
Jquery is developed in ECMA 5.1.
I can't think of a way to get the results all at once and put them in the array.
You can use es6's rest parameters, or arguments if you have ES5 or lower boundaries.
In the first place, jQuery's ajax should return a copy of Promise (Deferred up to 2 series) unless it is a much older version, so I feel that the code provided is quite a detour.
If you use a native Promise or its polyphil and jQuery 3.x, you can do the following:
const request=[
{"url":"https://jsonplaceholder.typicode.com/posts/", "params": {name:'hoge'}},
{"url":"https://jsonplaceholder.typicode.com/posts/", "params": {name:'fuga'}},
{"url":"https://jsonplaceholder.typicode.com/posts/", "params": {name:'piyo'}},
]
Promise.all(request.map(requ=>{
return$.ajax(req.url,{
type: 'post',
data —req.params
})
}).then(res=>{
console.log(res)
}).catch(function(err){
console.error(err)
})<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>(The above snippets use ES6)
I tried ES5+jQuery 2.x
var request=[
{"url":"https://jsonplaceholder.typicode.com/posts/", "params": {name:'hoge'}},
{"url":"https://jsonplaceholder.typicode.com/posts/", "params": {name:'fuga'}},
{"url":"https://jsonplaceholder.typicode.com/posts/", "params": {name:'piyo'}},
]
// if use promote
Promise.all(request.map(function(req){
return$.ajax(req.url,{
type: 'post',
data —req.params
})
}).then(function(res){
console.log(res)
}).catch(function(err){
console.error(err)
})
// or $.when
$.when.apply($,request.map(function(req){
return$.ajax(req.url,{
type: 'post',
data —req.params
})
}).done(function(){
for (vari=0;i<arguments.length;i++) {
console.log (arguments[i][0])
}
}).fail(function(err){
console.error(err)
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Hmmm jQuery.when it's kind of disgusting...
© 2024 OneMinuteCode. All rights reserved.