Jquery如何循环调用ajax?

独自等待
  • 16

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

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

我要通过数组中的id调用API获取到所有音乐的url,如果通过遍历数组调用ajax取到音乐的Url?

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列表
请问大家 该怎么实现?

回复
阅读 5.1k
7 个回答

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

使用同步就行了

async: false,

建议改成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]
    } 
})

循环里面套异步请求的话循环结束了异步结果不一定返回,你在外面套一层闭包试试,如果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)

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏