Question

我在下面有以下代码。我想做的是分别处理网络错误情况和返回的HTTP服务器错误情况。

fetch("$imageUploadUrl", {
          method: "POST",
          mode: "same-origin",
          cache: "no-store",
          credentials: "same-origin",
          redirect: "error",
          referrer: "origin",
          body: formData
      }).catch(function(error) {
        failure("There was an error while uploading the image");
      }).then(function(response) {
          if (response.ok){
            return Promise.resolve(response.json());
        } else {
            return Promise.reject(response.text())
        }
      }).then(function(result) {
        success(result.location);
      }).catch(function(errorText) {
          return failure (errorText);
      })

但是，与Promise.resolve()不同的是，Promise.reject()在返回之前不等待从response.text()来解决承诺。我设法通过添加async / await来获得已解决的承诺：

fetch("$imageUploadUrl", {
          method: "POST",
          mode: "same-origin",
          cache: "no-store",
          credentials: "same-origin",
          redirect: "error",
          referrer: "origin",
          body: formData
      }).catch(function(error) {
        failure("There was an error while uploading the image");
      }).then(async function(response) {
          if (response.ok){
            return Promise.resolve(response.json());
        } else {
            return Promise.reject(await response.text())
        }
      }).then(function(result) {
        success(result.location);
      }).catch(function(errorText) {
          failure(errorText);
      });

这是达到我目标的唯一方法吗？

我也尝试过这样做：

fetch("$imageUploadUrl", {
          method: "POST",
          mode: "same-origin",
          cache: "no-store",
          credentials: "same-origin",
          redirect: "error",
          referrer: "origin",
          body: formData
      }).catch(function(error) {
        failure("There was an error while uploading the image");
      }).then(function(response) {
          if (response.ok){
            return Promise.resolve(response.json());
        } else {
            return Promise.reject(response.text())
        }
      }).then(function(result) {
        success(result.location);
      }).catch(function(textPromise) {
          return textPromise;
      }).then(function(text) {
        console.log(text);
      })

但是即使我在上面的代码中调用console.log时，也总是调用带有Promise.resolve()的最后一个，因为它附加在fetch函数本身的promise上。你知道为什么会这样吗？

Answer 1

您可以等待诺言，然后拒绝它：

NOT IN

Answer 2

那么这个版本呢？

const options = {
  method: 'POST',
  mode: 'same-origin',
  cache: 'no-store',
  credentials: 'same-origin',
  referrer: 'origin',
  body: formData
}

async function parseResponse (response) {
  try {
    success(await response.json())
  } catch () {
    failure(await response.text())
  }
}

function parseError (err) {
  failure(`Error uploading file: ${err}`)
}

fetch('$imageUploadUrl', options)
  .then(parseResponse)
  .catch(parseError)

使用async / await是从Promise.reject（）接收已解决的Promise的唯一方法吗？

2 个答案: