jQuery 3.6.2中使用await $.ajax如何获取XHR对象及响应值

你可以通过await结合.then()的方式，在不使用回调嵌套的前提下获取XHR对象，同时保持代码的可读性，示例代码如下：

async function GetThingWithHeader() {
    // 解构获取响应体、状态和XHR对象
    const [response, status, xhr] = await $.ajax({
        type: "POST",
        url: "/path",
        // 额外配置项
    }).then((res, stat, xhrInstance) => [res, stat, xhrInstance]);

    // 读取目标响应头
    const targetHeader = xhr.getResponseHeader("TheHeader");
    
    // 后续业务逻辑
    console.log(response, targetHeader);
}

或者如果你更关注先拿到响应体，再单独获取头信息，也可以这么写：

async function GetThingWithHeader() {
    let targetHeader;
    const response = await $.ajax({
        type: "POST",
        url: "/path",
        // 额外配置项
    }).then((res, _, xhr) => {
        targetHeader = xhr.getResponseHeader("TheHeader");
        return res;
    });

    // 使用响应体和头信息
    console.log(response, targetHeader);
}

关于你担心的await $.ajax()写法是否官方推荐：jQuery从3.0版本开始就正式让$.ajax()返回兼容Promise规范的thenable对象，这种写法是官方认可的标准用法，完全可以放心使用。

Jquery version: 3.6.2

我在编写Ajax请求时，为了代码可读性，希望避免使用.done()这类回调函数，仅通过var result = await $.ajax({});的方式实现。创建完整Promise的方案也不在考虑范围内，因为其可读性比回调函数还差。

通常我可以通过以下代码轻松获取请求结果：

async function GetThing(){
    var result = await $.ajax({
        type: "GET",
        url: "/PathToBackEnd"
    });
}

该函数能返回我预期的准确值。最近出现了新需求：需要获取XHR对象以读取响应中的部分请求头。请问是否能在避免回调函数的前提下实现这一需求？我追求代码的易读性，如果实现方式过于复杂晦涩，我宁愿使用回调函数。

我未能找到太多相关实现信息，虽然这种写法可读性更高，我希望继续沿用，但找不到相关资料让我担心这种方式是否并不被官方推荐。

以下是我当前使用回调函数的实现代码：

$.ajax({
    type: "POST",
    url: "/path",
    //extra settings
}).done(function(response, status, xhr) {
    var header = xhr.getResponseHeader("TheHeader");
    //code
})

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