当JSON的某个字段缺失或类型不符时，如何使用 try-catch 或 Promise 结合 async/await 实现兼容性更强的错误处理机制？

Question

在前端开发中，使用 fetch 或 axios 请求API时，如何正确处理JSON数据的解析与展示？在实际项目中遇到的问题是，当后端返回的JSON数据格式与预期不一致时，前端如何优雅地进行错误处理，避免页面崩溃？

fetch('https://example.com/api/data')
  .then(response => response.json())
  .then(data => {
    // 假设data的结构为 {name: string, age: number}
    console.log(data.name);
    console.log(data.age);
  })
  .catch(error => {
    console.error('JSON解析错误:', error);
  });

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

要实现兼容性强且优雅的错误处理机制，可以采用如下策略：

1. 使用 try-catch 块：这是最基础、最简单的错误处理方式。

2. 使用 Promise.all() 和 Promise.race() 来合并异步操作，并在所有操作完成后才执行回调函数。

3. 使用 async/await 配合 .then() 和 .catch() 方法来优雅地处理异步操作。

4. 如果数据不是 JSON 格式，可以尝试将其转换为字符串并解析。

5. 对于可能的数据格式问题，可以提供一个默认值或错误提示给用户。

下面是一个示例：

首先，定义一个错误处理函数，用于捕获和打印异常信息：

function handleError(error) {
  console.error(`An error occurred: ${error.message}`);
}

// 示例数据格式
const exampleData = {
  name: 'John Doe',
  age: 30,
};

// 错误处理
fetch('https://example.com/api/data')
  .then(response => response.json())
  .then(data => {
    // 假设data的结构为 {name: string, age: number}
    console.log(data.name);
    console.log(data.age);

    if (typeof data !== 'object' || !data) {
      throw new Error('Invalid data format');
    }
  })
  .catch(handleError)
  .finally(() => console.log('Finally block executed'));

在这个例子中，我们首先从网络请求中解析响应，然后检查获取到的对象是否为对象（即包含键）。如果不是，抛出一个错误。这样可以确保我们的代码不会因为未知或无效的数据而崩溃。

请注意，上述示例中的错误处理逻辑非常简单，没有考虑到更复杂的场景，如多阶段处理流程或者不同类型的错误。根据具体需求，可能会需要进一步扩展错误处理逻辑。