How to call ajax? iteratively by Jquery

now there is such a requirement, for example, I have an array:

    arr=[
           {    
                id:"84001",
                name:""
            },{    
                id:"84002",
                name:""
            },{    
                id:"84003",
                name:""
            },{    
                id:"84004",
                name:""
            }, 
    ]

I want to get the url, of all the music by calling API through the id in the array. If I call ajax through the traversal array, I get the Url? of the music.

var urlList=[]
arr.forEach((item)=>{
    $.ajax({
    url:"api/v1/getMusicById?id="+item.id,
    type:"get",
    success:(res)=>{
        urlList.push(res.url)
    }
    
    })

})
console.log(urlList)

this is what I thought at first, but there must be something wrong with this. The ajax request is asynchronous
I want to complete the ajax request after the traversal is completed, and then I can get a url list
how can you implement it?

Ajax--returns-a-value-of ajax javascript

Mar.06,2021

< del > Promise.all , or recursively call and delete the array item until it is 0, which is even easier if you can use async/await . < / del >
none of the above is correct. The correct thing to do is to ask your backend to return url . What does it mean to have more than ten requests for one piece of data?

just use Synchronize

async: false,

it is recommended to change it to post request
request parameters. All id are grouped into an array in the request parameters, and all url are returned uniformly at the backend

var urlList=[]
var idList = [1,2,3,4,5]
$.ajax({
    url:'api/v1/getMusicByIds,
    type:'post',
    data:idList,
    success:(res)=>{
        urlList = [...res.url]
    } 
})

if the asynchronous request is nested inside the loop, the asynchronous result will not be returned at the end of the loop. Try a layer of closure on the outside. If forEach does not work, replace it with for,. I have used asynchronous request in for loop. I do not know whether forEach will work without forEach,.

var urlList=[]
arr.forEach((item)=>{
    (function(){
        $.ajax({
        url:'api/v1/getMusicById?id='+item.id,
        type:'get',
        success:(res)=>{
            urlList.push(res.url)
        }
        
        })    
    })()
})
console.log(urlList)

I think there is something wrong with your needs

generally, url that requires music is needed when playing, and only one song is played at a time, so you can execute an ajax request to get url through id

when playing.

set a variable index=0; after each success and then determine whether arr [index] has a value. In some cases, it is a good choice to continue ajax, recursion

is a problem of requirements. Even if the function is done, it is not possible to send so many requests at once. The server explodes and changes it to the request list

Previous: How to realize the Null value judgment of objects in httpsession by JSTL by Thymleaf

Next: Gulp reported an error

How to get the return result of 303 status for xhr or jQuery ajax, Post request
problem website http: www.xingk.cc forum.php. needs to be registered, which is quite troublesome. Here is a temporary account account: Av123456! password for Alain Lei who likes to play with shit. problem description the address of the networ...

Ajax--returns-a-value-of ajax javascript jquery jquery-ajax

Mar.20,2021
Ajax in the Vue component cannot use sort sorting on the data variables after obtaining the JSON and assigning it.
problem description after I use axios to get JSON data from the server, I assign values to the data variables in the .vue component, and then modify the ordering of the data variables through the methods creation method, but after using the sort () me...

Ajax--returns-a-value-of ajax javascript vue.js

Mar.30,2022