页面多Ajax请求时，如何为首个请求设置最高优先级？

当然有办法实现你的需求！下面给你两种实用的方案，都不需要把Ajax 2和3放到第一个请求的success回调里，还能确保第一个Ajax请求始终是最高优先级，其余请求必须等它完成后再执行。

方案一：请求队列 + 状态标记 #

这种方式通过维护一个待执行队列和状态标记，来控制请求的执行时机，逻辑清晰且灵活：

// 标记第一个请求是否完成（初始为false）
let isFirstAjaxCompleted = false;
// 存放待执行的请求函数队列
let pendingAjaxQueue = [];

// Ajax 1 - 最高优先级请求
$.ajax({
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    type: 'GET',
    dataType: 'json',
    url: '你的第一个请求URL',
    complete: function() {
        // 不管请求成功/失败，只要完成就更新标记
        isFirstAjaxCompleted = true;
        // 执行队列里所有待处理的请求
        pendingAjaxQueue.forEach(requestFn => requestFn());
        // 清空队列
        pendingAjaxQueue = [];
    }
});

// Ajax 2 - 按钮点击触发
$('#btn-ajax2').on('click', function() {
    // 封装Ajax2的执行逻辑
    const runAjax2 = () => {
        $.ajax({
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            type: 'GET',
            dataType: 'json',
            url: '你的第二个请求URL'
            // 其他配置（比如data、success回调等）
        });
    };

    // 判断第一个请求是否完成，决定直接执行还是加入队列
    if (isFirstAjaxCompleted) {
        runAjax2();
    } else {
        pendingAjaxQueue.push(runAjax2);
    }
});

// Ajax 3 - 按钮点击触发
$('#btn-ajax3').on('click', function() {
    const runAjax3 = () => {
        $.ajax({
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            type: 'GET',
            dataType: 'json',
            url: '你的第三个请求URL'
            // 其他配置
        });
    };

    if (isFirstAjaxCompleted) {
        runAjax3();
    } else {
        pendingAjaxQueue.push(runAjax3);
    }
});

方案优势 #

• 完全分离各个请求的逻辑，不需要把Ajax2/3的代码嵌套到Ajax1的回调里
• 队列会按请求触发的顺序执行后续请求，保证执行顺序
• 兼容所有jQuery版本，没有版本限制

方案二：利用Promise等待第一个请求完成 #

从jQuery 3.0开始，$.ajax会返回一个Promise对象，我们可以直接利用这个特性，让后续请求等待第一个Promise完成后再执行：

// 把Ajax1包装成Promise（jQuery 3.0+直接返回Promise）
const firstAjaxPromise = $.ajax({
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    type: 'GET',
    dataType: 'json',
    url: '你的第一个请求URL'
});

// Ajax2 - 按钮点击触发
$('#btn-ajax2').on('click', function() {
    // 等待第一个请求完成（不管成功/失败）再执行Ajax2
    firstAjaxPromise
        .then(() => runAjax2())
        .catch(() => runAjax2()); // 失败时也执行，符合"等待第一个完成"的需求
});

// Ajax3 - 按钮点击触发
$('#btn-ajax3').on('click', function() {
    firstAjaxPromise
        .then(() => runAjax3())
        .catch(() => runAjax3());
});

// 封装Ajax2和Ajax3的执行函数
function runAjax2() {
    $.ajax({
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        type: 'GET',
        dataType: 'json',
        url: '你的第二个请求URL'
        // 其他配置
    });
}

function runAjax3() {
    $.ajax({
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        type: 'GET',
        dataType: 'json',
        url: '你的第三个请求URL'
        // 其他配置
    });
}

方案优势 #

• 代码更简洁，利用Promise的特性减少状态管理的代码
• 语义化更强，then和catch清晰表达了"等待第一个请求完成"的逻辑

内容的提问来源于stack exchange，提问作者ezhil