使用承诺的正确心态？

Question

我最近才看到 promises（JS 不是我的强项），我不确定这样做的正确方法是什么。 Promise 应该防止代码向右漂移，但是当我最终得到一些复杂的逻辑时，无论如何我最终嵌套得太深了，所以我确信我做错了。

如果我将成功和失败都作为 json 值返回，并且我也想处理格式错误的 json，我会立即考虑执行以下操作：

fetch('json').then(function (result) {
    return result.json();
}).catch(function (result) {
    console.error("Json parse failed!");
    console.error(result.text);
}).then(function (wat) {
    // if (!result.ok) { throw...
}).catch(function (wat) {
    // Catch http error codes and log the json.errormessage
});

当然，这行不通。这是典型的同步代码。但这是首先想到的。我能看到的问题：

• 如何同时获得响应和 json 输出？
• 如何获得错误和成功的单独控制流？
• 如何捕获两种响应类型的 json 解析错误？

我最好的尝试是嵌套到我可能会使用回调的地步，但它最终不起作用，因为我仍然没有解决上述任何问题：

fetch('json').then(function (response) {
    if (!response.ok) {
        throw response;
    }
}).then(
    function (response) {
        response.json().then(function (data) {
            console.log(data);
        });
    },
    function (response) {
        response.json().then(function (data) {
            console.error(data.errormessage);
        });
    }
).catch(function () {
    console.error("Json parse failed!");
    // Where's my response????
});

执行此操作的“正确”方法是什么？ （或者至少错误更少）

Answer 1

如果您无论如何都想调用response.json()（用于成功和失败的响应）并且想将response 一起使用将响应数据。使用Promise.all：

fetch('json')
  .then(response => Promise.all([response, response.json()]))
  .then(([response, data]) => {
    if (!response.ok) {
      console.error(data.errormessage);
    } else {
      console.log(data);
    }
  })
  .catch(err => {
    if (/* if http error */) {
      console.error('Http error');
    } else if (/* if json parse error */) 
      console.error('Json parse failed');
    } else {
      console.error('Unknown error: ' + err);
    }
  });

Answer 2

你不应该在 Promises 中使用异常来控制流，就像在不使用 Promises 时一样。这就是为什么 fetch 本身不仅仅拒绝 200 以外的状态码的承诺。

这是一个建议，但答案必然取决于您的具体需求。

fetch('json').then(function (response) {
    if (!response.ok) {
        response.json().then(function (data) {
            console.error(data.errorMessage);
        });
        return ...;
    }

    return response.json().catch(function () {
        console.error("Json parse failed!");
        return ...;
    });
}).catch(function (e) {
    console.error(e);
    return ...;
});