Svelte+TypeScript组件解析API响应报错排查求助

首先，你需要明确{#await}进入catch分支的具体错误原因，建议先修改catch分支代码，打印错误详情：

{:catch error}
    error displaying submission: {error.message}
    {console.log(error)}
{/await}

通过错误信息可以直接定位问题，结合你的代码和描述，可能的原因有以下几种：

• API返回状态码非200但属于2xx范围：你的代码手动判断status === 200才返回数据，否则抛出错误。但axios默认会将所有2xx状态码视为成功请求（比如201创建成功、204无内容等），如果API返回这类状态码，你的代码会进入else块抛出错误，导致Promise被拒绝进入catch分支。你提到控制台能打印data，说明状态码是200，这个可能性较低，但可以简化代码规避：
  去掉手动判断状态码的逻辑，axios会自动处理非2xx状态码的错误：

  export const getSubmission = async (uuid: string): Promise<Submission> => {
      const { data } = await axios.get<Submission>(`${env.PUBLIC_API_BASE_URL}/submissions/${uuid}`);
      console.log(JSON.stringify(data));
      return data;
  };
  

• 返回数据与Submission类型不匹配：虽然控制台打印了data，但如果返回的data缺少status字段，或者status的类型与Submission定义不一致，模板中访问submission.status时会抛出渲染错误。不过这类错误不会触发{#await}的catch分支，而是会在控制台显示具体报错，你可以检查控制台日志确认。

• Promise被意外拒绝：如果getSubmission函数内部存在隐藏错误（比如JSON.stringify(data)抛出异常，不过你说控制台能正常打印，这个可能性极低），打印catch的error对象就能直接看到问题。

另外，建议检查你的Submission类型定义，确保API返回的数据结构完全符合该类型，比如：

// ../models/submission.ts
export interface Submission {
    status: string; // 或对应类型，比如number
    // 其他必填字段...
}

内容的提问来源于stack exchange，提问作者bolino