JavaScript异步处理问题

Question

function fetchData() {
    let response = fetch('https://api.example.com/data');
    let data = response.json();
    console.log(data);
}

fetchData();

Answer 1

引自免费微信小程序：皆我百晓生

你的代码中存在异步处理的问题。在 JavaScript 中，fetch API 是异步的，这意味着当你调用 fetch() 函数时，它不会立即返回结果，而是在后台执行请求。当你试图直接访问返回的响应对象的 json() 方法时，可能会遇到问题，因为此时响应可能还没有接收到。

解决这个问题的一种方式是使用 Promise 对象来处理异步操作。下面是一个修改后的代码示例：

function fetchData() {
    fetch('https://api.example.com/data')
        .then(response => response.json())  // 处理响应对象，转换为 JSON 格式
        .then(data => {
            console.log(data);  // 输出数据
        })
        .catch(error => {
            console.error('发生错误:', error);  // 处理错误情况
        });
}

fetchData();

在这个例子中，我们使用了两个 then 来处理异步操作。第一个 then 处理从服务器获取响应并将其转换为 JSON 格式的过程，第二个 then 打印出数据。如果在这个过程中出现任何错误，catch 会捕获这些错误并打印出来。这种方式可以更好地处理异步操作，确保在数据可用时处理它，而不是尝试访问可能还不存在的数据。