Javascript 承诺链拒绝

我正在编写这个连锁承诺

首先，单击按钮时，它会检查文件url是否存在：

如果不是，则拒绝，然后响应状态显示在警报中

如果是，则通过webapi更新DB，然后更新react状态

我面临的问题是，即使我拒绝了validateResponse函数，它仍然会运行下一个函数

我认为应该直接去抓

另外，下面调用webapi的代码似乎不太好，里面有一个承诺，然后等等。整个代码似乎也不清楚？这样做是否更好

onClick: (event, row) => {


function validateResponse(response) {
  if (!response.ok) { // assume it is the reject case.
    console.log("file not ready");
    return Promise.reject(response.statusText);
  } else {
    window.open(response.url, '_blank', 'location=yes,height=500,width=600,scrollbars=no,status=yes')
    return response;
  }

}


fetch(row.fileurl, {
  method: 'HEAD'
})
.then(validateResponse)

.then(console.log("== this line not printed, due to rejected."))

.then(row.linked = 1)

.then( 
    fetch(this.server_url+'/file/linked', { method: 'POST', body: JSON.stringify(row),  headers: { 'Content-Type': 'application/json' }, })
      .then(res => {
        console.log("== it should be rejected!, why printed this line2")
        if (res.status==200) {
          this.setState({ row });
        } else {
          row.checked = 0;
          throw Error(res.status);
        }

  })                            

)
.catch(function (error) {
    alert("Sorry, the file is not avaliable yet")
});


}

还有一个问题：

.then(() => row.linked = 1)
.then(() => fetch(this.server_url+'/file/linked', { method: 'POST', body: JSON.stringify(row),  headers: { 'Content-Type': 'application/json' }, })

如何将此合并为一个

.then(() => row.linked = 1 && fetch(this.server_url+'/file/linked', { method: 'POST', body: JSON.stringify(row),  headers: { 'Content-Type': 'application/json' }, })

---

这样做是否更好/正确

返回

承诺。拒绝
应该会使它起作用

问题是，当您在
中未指定返回值时，
将默认使用未定义的值解析承诺

在您的情况下，您应该更改
validateResponse
，使其返回被拒绝的承诺：

返回承诺.拒绝（response.statusText）

查看更多信息

=================

编辑：尝试使用此代码

onClick: (event, row) => {
  function validateResponse(response) {
    if (!response.ok) { // assume it is the reject case.
      console.log("file not ready");
      return Promise.reject(response.statusText);
    } else {
      window.open(response.url, '_blank', 'location=yes,height=500,width=600,scrollbars=no,status=yes')
      return response;
    }
  }

  fetch(row.fileurl, {
    method: 'HEAD'
  })
  .then(validateResponse)
  .then(() => console.log("== this line not printed, due to rejected."))
  .then(() => row.linked = 1)
  .then(() => fetch(this.server_url+'/file/linked', { method: 'POST', body: JSON.stringify(row),  headers: { 'Content-Type': 'application/json' }, })
    .then(res => {
      console.log("== it should be rejected!, why printed this line2")
      if (res.status==200) {
        this.setState({ row });
      } else {
        row.checked = 0;
        throw Error(res.status);
      }
    })
  )
  .catch(function (error) {
      alert("Sorry, the file is not avaliable yet")
  });
}

========================

Edit2:
。然后
接受函数作为回调。这意味着，如果需要，您可以将其放在一个大功能中：

onClick: (event, row) => {
  function validateResponse(response) {
    if (!response.ok) { // assume it is the reject case.
      console.log("file not ready");
      return Promise.reject(response.statusText);
    } else {
      window.open(response.url, '_blank', 'location=yes,height=500,width=600,scrollbars=no,status=yes')
      return response;
    }
  }

  fetch(row.fileurl, {
    method: 'HEAD'
  })
  .then(validateResponse)
  .then(() => {
    console.log("== this line not printed, due to rejected.");
    row.linked = 1;
    return fetch(this.server_url+'/file/linked', { method: 'POST', body: JSON.stringify(row),  headers: { 'Content-Type': 'application/json' }, })
      .then(res => {
        console.log("== it should be rejected!, why printed this line2")
        if (res.status==200) {
          this.setState({ row });
        } else {
          row.checked = 0;
          throw Error(res.status);
        }
      })
  })
  .catch(function (error) {
      alert("Sorry, the file is not avaliable yet")
  });
}

返回
Promise.reject
应该可以使它正常工作

问题是，当您在
中未指定返回值时，
将默认使用未定义的值解析承诺

在您的情况下，您应该更改
validateResponse
，使其返回被拒绝的承诺：

返回承诺.拒绝（response.statusText）

查看更多信息

=================

编辑：尝试使用此代码

onClick: (event, row) => {
  function validateResponse(response) {
    if (!response.ok) { // assume it is the reject case.
      console.log("file not ready");
      return Promise.reject(response.statusText);
    } else {
      window.open(response.url, '_blank', 'location=yes,height=500,width=600,scrollbars=no,status=yes')
      return response;
    }
  }

  fetch(row.fileurl, {
    method: 'HEAD'
  })
  .then(validateResponse)
  .then(() => console.log("== this line not printed, due to rejected."))
  .then(() => row.linked = 1)
  .then(() => fetch(this.server_url+'/file/linked', { method: 'POST', body: JSON.stringify(row),  headers: { 'Content-Type': 'application/json' }, })
    .then(res => {
      console.log("== it should be rejected!, why printed this line2")
      if (res.status==200) {
        this.setState({ row });
      } else {
        row.checked = 0;
        throw Error(res.status);
      }
    })
  )
  .catch(function (error) {
      alert("Sorry, the file is not avaliable yet")
  });
}

========================

Edit2:
。然后
接受函数作为回调。这意味着，如果需要，您可以将其放在一个大功能中：

onClick: (event, row) => {
  function validateResponse(response) {
    if (!response.ok) { // assume it is the reject case.
      console.log("file not ready");
      return Promise.reject(response.statusText);
    } else {
      window.open(response.url, '_blank', 'location=yes,height=500,width=600,scrollbars=no,status=yes')
      return response;
    }
  }

  fetch(row.fileurl, {
    method: 'HEAD'
  })
  .then(validateResponse)
  .then(() => {
    console.log("== this line not printed, due to rejected.");
    row.linked = 1;
    return fetch(this.server_url+'/file/linked', { method: 'POST', body: JSON.stringify(row),  headers: { 'Content-Type': 'application/json' }, })
      .then(res => {
        console.log("== it should be rejected!, why printed this line2")
        if (res.status==200) {
          this.setState({ row });
        } else {
          row.checked = 0;
          throw Error(res.status);
        }
      })
  })
  .catch(function (error) {
      alert("Sorry, the file is not avaliable yet")
  });
}

您没有在回调中调用第二次fetch，这会导致fetch立即启动

function someFunc() {
    // You are invoking the second fetch immediately
    fetch("example.com")
        .then(validate)
        .then(fetch("somewhere.com"))

    // You need to invoke it as a callback
    fetch("example.com")
        .then(validate)
        .then(() => fetch("somewhere.com"))

    // Or with non-arrow
    fetch("example.com")
        .then(validate)
        .then(function() {
            return fetch("somewhere.com");
        });
}

您没有在回调中调用第二次fetch，这会导致fetch立即启动

function someFunc() {
    // You are invoking the second fetch immediately
    fetch("example.com")
        .then(validate)
        .then(fetch("somewhere.com"))

    // You need to invoke it as a callback
    fetch("example.com")
        .then(validate)
        .then(() => fetch("somewhere.com"))

    // Or with non-arrow
    fetch("example.com")
        .then(validate)
        .then(function() {
            return fetch("somewhere.com");
        });
}

谢谢，我试图添加return，但它仍然指向这一行：console.log（==它应该被拒绝！为什么打印这一行？）@manhon您没有将回调传递给最后一个
。然后（）
，您在创建承诺链之前调用了那里的
fetch（）
。你的
控制台.log（“==由于被拒绝，这行没有打印。”）
和你的
行.linked=1
…你能用固定的代码回复吗？我试了几个小时试了很多次，但仍然无法理解..>非常感谢，它很有效！我能再问一个问题吗？我刚刚在第一篇文章中添加了这个问题。@Fleezey非常感谢你！我现在对诺言的理解很差。非常感谢！谢谢，我试图添加return，但它仍然指向这一行：console.log（==它应该被拒绝！为什么打印这一行？）@manhon您没有将回调传递给最后一个
。然后（）
，您在创建承诺链之前调用了那里的
fetch（）
。你的
控制台.log（“==由于被拒绝，这行没有打印。”）
和你的
行.linked=1
…你能用固定的代码回复吗？我试了几个小时试了很多次，但仍然无法理解..>非常感谢，它很有效！我能再问一个问题吗？我刚刚在第一篇文章中添加了这个问题。@Fleezey非常感谢你！我现在对诺言的理解很差。非常感谢<代码>。然后
将函数作为参数，但您将指令放入其中
.then（（）=>console.log（/*…*/）
）等。将
validateResponse（）
代码滚动到承诺链后，您可以得到更好的优化。完全同步操作后，您不需要额外的
.then（）
。您有两个异步操作，
fetch（row.fileurl，…）
和
fetch（this.server\u url+'/file/linked'，…）
，因此所有操作都将简化为两个thens和一个catch。
。然后，
将函数作为参数，但您将指令放入其中
.then（（）=>console.log（/*…*/）
）等。将
validateResponse（）
代码滚动到承诺链后，您可以得到更好的优化。完全同步操作后，您不需要额外的
.then（）
。您有两个异步操作，
fetch（row.fileurl，…）
和
fetch（this.server\u url+'/file/linked'，…）
，因此所有操作都将简化为两个thens和一个catch。