面试题：Qwik中使用fetch进行API调用的基本步骤

Question

在Qwik项目中，描述使用fetch进行简单API调用并处理返回数据的基本步骤，假设API返回JSON数据，且该API不需要身份验证。

Answer 1

1. 发起API调用：
   • 在Qwik组件中，使用fetch函数来发起HTTP请求。例如，如果API地址为https://example.com/api/data，可以这样写：

   const response = await fetch('https://example.com/api/data');
   

2. 处理响应：
   • 检查响应状态，确保请求成功。response.ok属性为true表示请求成功。

   if (!response.ok) {
     throw new Error(`HTTP error! status: ${response.status}`);
   }
   

3. 解析JSON数据：
   • 因为API返回JSON数据，使用response.json()方法将响应解析为JavaScript对象。

   const data = await response.json();
   

4. 使用数据：
   • 解析后的数据data就可以在组件中使用了，比如渲染到页面上。例如，假设data是一个包含name字段的对象：

   return (
     <div>
       <p>{data.name}</p>
     </div>
   );