Jquery如何循环调用ajax?

Question

现在有这样一个需求　比如我有一个数组：

    arr=[
           {    
                id:'84001',
                name:'认真的雪'
            },{    
                id:'84002',
                name:'黄河大道东'
            },{    
                id:'84003',
                name:'体面'
            },{    
                id:'84004',
                name:'断了的弦'
            }, 
    ]

我要通过数组中的id调用API获取到所有音乐的url，如果通过遍历数组调用ajax取到音乐的Ｕｒｌ？

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

})
console.log(urlList)

我起初的想法是这样的　但是这样做肯定有问题　ajax请求是异步的
我想要在遍历完成后　ajax请求也全部完成　然后可以获得一个url列表
请问大家　该怎么实现？

Answer 1

Promise.all，或者递归调用并删除数组项直到为0，如果能用async/await就更简单了。
以上都不是正确的做法，正确的做法是让你们后端把url也返回过来，一条数据十几个请求是几个意思？

Answer 2

使用同步就行了

async: false,

Answer 3

建议改成post请求
请求参数中将所有的id组成一个数组，后端统一返回所有的url

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

Answer 4

循环里面套异步请求的话循环结束了异步结果不一定返回，你在外面套一层闭包试试，如果forEach不行的话就换成for，我用过for循环里套异步，没用过forEach，不知道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)

Answer 5

我觉得是你的需求有问题吧

一般需要音乐的url就是在播放的时候需要，而每次都只会同时播放一首歌，那你可以播放的时候执行一次ajax请求去通过id获取url啊

Answer 6

非要这么做的话就设置一个变量index=0；每一次success以后index++，然后判断arr[index]是否有值，有的话继续ajax，递归是个不错的选择

Answer 7

是需求的问题, 这种情况即便功能做出来了 也不太能用 一次发那么多请求 服务器都爆炸了, 改成请求列表