javascript - promise 链接拒绝

Question

我正在编写这个链式 promise 。

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

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

如果是，那么它会通过 webapi 更新数据库，然后更新 react 状态。

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

我认为它应该直接转到catch。

此外，下面调用webapi的代码似乎不太好，then里面有一个promise，等等，整个代码似乎不清楚？这是更好的方法吗？

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' }, })

这是更好/正确的方法吗？

Answer 1

返回 Promise.reject 应该可以使其工作。

问题是，当您未在 .then 中指定返回值时，默认情况下它将使用未定义的值解析 Promise。

在您的情况下，您应该更改 validateResponse 以便它返回被拒绝的 promise :

返回 Promise.reject(response.statusText);

检查this了解更多信息。

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

编辑:尝试使用此代码

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: .then 接受函数作为回调。这意味着如果您愿意，您可以将其放入一个大函数中:

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")
  });
}