Question

jQuery.when()可用于在完成thenable对象后执行回调。

我发现它很有用，因为它可以将多个可缩放的对象分组：

promise1.then((v1)=>{
  promise2.then((v2)=>{
    promise3.then((v3)=>{
      // arrow pattern ... 
    })         
  })
})

// converts to
$.when(promise1, promise2, promise3)
.done((v1, v2, v3)=>{
  // yay, nice and flat
});

但是现在我发现当我提供一个vs多个对象时，该函数的行为有所不同。如果有多个罐头，when()似乎记录了更多信息，那么实际的收益可以通过v1[0]访问。

我设置了一个小提琴：https://jsfiddle.net/xpvt214o/989940/

HTML：

<ul>
<li><div id="result1"></div></li>
<br>
<li><div id="result2"></div></li>
</ul>

JS：

$.when(
    $.get("https://httpbin.org/get")
).done((v1)=>[
  $("#result1").html(v1["url"])
])

$.when(
    $.get("https://httpbin.org/get"),
    $.get("https://httpbin.org/get")
).done((v1, v2)=>[
  $("#result2").html(v1[0]["url"])
])

Answer 1

这有点奇怪，因为$.ajax.then()有多个参数，而$.when仅在传递了多个promise时才返回所有这些参数。

一种解决方法是为每个请求添加then()

$.when(
    $.get("https://httpbin.org/get").then(d=>d),
    $.get("https://httpbin.org/get").then(d=>d)
).then((v1, v2)=>{
  console.log(v1["url"])
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

或使用Promise.all()忽略$.ajax.then()的辅助参数

Promise.all([$.get("https://httpbin.org/get"), $.get("https://httpbin.org/get")])
  .then(res => console.log(res[0].url))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

我找不到任何文档可以告诉我为什么将结果准确地转换为多写而不是单写的三进制数组。

由于您的帖子可疑没有实际问题，我假设您只是想强制两个调用以相同的方式执行？您可以通过在单次调用情况下将空承诺作为虚拟的第二个参数传递来实现：

$.when(
    $.get("https://httpbin.org/get"),
    null
).done((v1)=>[
  $("#result0").html(JSON.stringify(v1))
])

这将使JQuery对结果使用与多案例相同的数组符号

$.when(
    $.get("https://httpbin.org/get"),
    $.get("https://jsonplaceholder.typicode.com/todos/1")
).done((v1,v2)=>{
  $("#result1").html(JSON.stringify(v1))
  $("#result2").html(JSON.stringify(v2))
})

提琴：https://jsfiddle.net/xpvt214o/990023/

jQuery when（）：一个行为与多个行为的不同行为

2 个答案: