如何正确构建具有条件和延迟的 fetch promise 链？答案

【问题标题】：How propertly construct fetch promise chain with condition and delay?如何正确构建具有条件和延迟的 fetch promise 链？
【发布时间】：2020-07-23 16:55:05
【问题描述】：

如何正确构造具有条件和延迟的 fetch promise 链？我有

fetch("/myApi")
  .then(response => response.json())
  .then(json => {
    if (data.foo != "bar")
      return fetch("/setFoo=bar").then(() => delay(100).then(() => {
        if (data.magic != "exist")
          return fetch("/setMagic=exist")
      }))
    if (data.magic != "exist")
      return fetch("/setMagic=exist")
  })
  .then(() => console.log("Great success !"))

function delay(ms) { return new Promise((resolve, reject) => setTimeout(resolve, ms))}

这段代码应该发出API请求，检查foo值是否等于bar，如果不是，设置foo=bar，然后等待100ms，然后设置值magic=exist，以防它没有设置

但如果foo 已经是bar 它应该立即将magic 设置为exist

在我的例子中，我重复了magic=exist 检查和设置，但它看起来都错了。

【问题讨论】：

标签： javascript promise fetch

【解决方案1】：

这是你想要的：

fetch("/myApi")
  .then(response => response.json())
  .then(async json => {
    if (data.foo != "bar"){
      await fetch("/setFoo=bar");
      await delay(100);
    }
    if (data.magic != "exist")
      return fetch("/setMagic=exist")
  })
  .then(() => console.log("Great success !"))

function delay(ms) { return new Promise((resolve, reject) => setTimeout(resolve, ms))}

没有async

const check = (data) => {
    if (data.magic != "exist")
        return fetch("/setMagic=exist")
}))
}

fetch("/myApi")
    .then(response => response.json())
    .then(json => {
        if (data.foo != "bar")
            return fetch("/setFoo=bar").then(() => delay(100).then(() => {
                return check(data)
            }))
        return check(data)
    })
    .then(() => console.log("Great success !"))

function delay(ms) { return new Promise((resolve, reject) => setTimeout(resolve, ms)) }

【讨论】：

它似乎符合您的要求。如果您不提供完整的运行示例，则很难找到您真正想要的。

【解决方案2】：

你可以这样写

  fetch("/myApi")
  .then(response => response.json())
  .then(setIfNotBar)
  .then(setIfMagicNotExist)
  .then(() => console.log("Great success !"))

function delay(ms) { return new Promise( resolve => setTimeout(resolve, ms) )}
function setIfNotBar(data) { data.foo != "bar" ? fetch("/setFoo=bar").then(delay(100)).then(() => data) : data}
function setIfMagicNotExist(data) { data.magic != "exist" ? fetch("/setMagic=exist"): data}

【讨论】：