调用await jquery.ajax时如何获取数据、textStatus和jqXHR？答案

【问题标题】：How to get data, textStatus and jqXHR when calling await jquery.ajax?调用await jquery.ajax时如何获取数据、textStatus和jqXHR？
【发布时间】：2020-11-17 22:42:44
【问题描述】：

我正在使用 JQuery AJAX，使用等待。我不想使用成功和错误回调，也不想使用.then 语法。

当像这样调用 jquery ajax 时

const { data, textStatus, jqXHR } = await $.ajax(url, {...});

那么左边的变量不会被填充。

如何使用await调用jquery ajax，仍然得到data、textStatus和jqXHR（类似成功回调）？

（只需调用const data = await $.ajax(url, {...}); 即可，但我需要访问textStatus和jqXHR。）

【问题讨论】：

如果您觉得我的回答有帮助，请不要忘记点赞我的回答 :)

标签： javascript jquery async-await

【解决方案1】：

您可以获得在success 选项中为ajax 函数指定的3 个参数，并对该匿名函数进行解构

    let data, textStatus, jqXHR;
    await $.ajax(url, {success: (dt, txt, jqx) => {
      data = dt;
      textStatus = txt;
      jqXHR = jqx;
    }});

或提取函数并这样做

...
const success = (dt, txt, jqx) => {
  data = dt;
  textStatus = txt;
  jqXHR = jqx;
}
...
await $.ajax(url, {success});
...

【讨论】：

【解决方案2】：

基于 jQuery 文档（因为我已经很多年没有使用过 jQuery），似乎 $.ajax 返回 jqXHR 所以一种方法可能是在调用 await $.ajax(...) 时不要在 jqXHR 对象上使用 await您可以改为执行以下操作

  const jqXHR = $.ajax("https://jsonplaceholder.typicode.com/todos/1");
  const data = await jqXHR;
  const statusText = jqXHR.statusText;

  console.log({ data, statusText, jqXHR });

或者，如果您喜欢在您的示例中使用它，您可以编写一个小的包装函数，或者也可以使用 $.ajaxSetup 来实现

包装函数的示例可能类似于

async function ajax() { 
   return new Promise((resolve, reject) => {
     $.ajax(...arguments)
      .then((data, statusText, jqXHR) => resolve({ data, statusText, jqXHR }))
 })
}

然后您可以使用ajax 代替$.ajax 之类的

const { data, statusText, jqXHR } = await ajax("https://jsonplaceholder.typicode.com/todos/1");

【讨论】：