处理获取错误 - JavaScript

在 JavaScript 中，获取数据是一项常见的任务，但是当我们在获取数据时，可能会遇到一些错误。 这些错误可能是由于网络问题，服务器问题或其他原因引起的。 在本文中，我们将讨论如何处理这些错误和提高代码的健壮性。

try...catch语句

JavaScript 中的 try...catch 语句是一种处理错误的常用方法。通俗地说，try...catch 语句允许我们尝试执行一段代码，并在代码块中捕获任何可能的错误。

try {
  // 可能抛出错误的代码
}
catch(error) {
  // 错误处理代码
}

使用 try...catch 进行错误处理的示例:

function getData() {
  try {
    const response = await fetch('https://www.example.com/data');
    const data = await response.json();
    return data;
  }
  catch(error) {
    console.error(error);
    return null;
  }
}

const data = getData();
if(data) {
  // 处理数据
}
else {
  // 处理错误
}

在代码中，我们使用 try...catch 包装了可能引发错误的代码，然后我们在 catch 块中处理错误，并返回 null。 在主要的代码块中，我们检查 data 是否为空，以确定是否有错误发生。

Promise.catch方法

另一种处理错误的方法是使用 Promise.catch 方法。Promise.catch 方法允许我们在 Promise 链中捕获错误，并处理它们。

fetch(url)
  .then(response => response.json())
  .catch(error => console.error(error));

常见的网络错误

在发生网络错误时，可能会收到一条或多条错误消息。 在这种情况下，我们需要检查常见的错误消息类型，并根据错误类型采取适当的步骤。

以下是一些常见的网络错误:

• TypeError: 这种错误通常是由于未正确处理服务器响应的数据而导致的。 确保在处理数据之前检查响应是否成功。

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new TypeError('response not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

• SyntaxError: 这种错误通常是由于服务器返回的数据格式不正确而导致的。 确保响应的数据使用正确的格式，例如 JSON 格式。

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error instanceof SyntaxError) {
      console.error('syntax error');
    } else {
      console.error(error);
    }
  });

• NetworkError: 这种错误通常是由于网络连接问题导致的。 确保您的网络连接正常并且服务器正在运行。

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error instanceof NetworkError) {
      console.error('network error');
    } else {
      console.error(error);
    }
  });

结论

在编写处理数据的 JavaScript 代码时，确保您的代码可以处理可能出现的错误。 使用 try...catch 或 Promise.catch 方法来捕获和处理错误消息，并确保检查常见的网络错误。

参考链接 https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await#handling_errors_with_async_await