解决循环中ajax异步问题

function personnelTalentDetails(arr, i) {
    // 如果数组length不等于0,就执行
    // 每次递归一次删除数组第一个元素
    if (arr.length) {
        $.ajax({
            type: "POST",
            url: APP_URL,
            data: {
                id: arr[0].id
            },
            dataType: "json",
            success: function (res) {
                if (res.code == 0) {
                    var str = "";
                    var value = res.Value;
                    str += `<div>`
                        value.forEach((val, inx) => {
                               str += `<div>循环的数组</div>`;
                           })
                    str += `</div>`
                    $(".div").append(str);
                    // 渲染数据之后 删除数组第一个元素,继续执行
                    arr.shift()
                    personnelTalentDetails(arr, ++i); // 回调成功进行下一次递归
                }
            },
            error: function () {
                arr.shift()
                personnelTalentDetails(arr, ++i); //失败仍需要继续下一步递归
            }
        })
    }
}