React中使用snoowrap调用Reddit API时.catch无法捕获404错误如何解决

问题根因&修复方案 #

• 异常未捕获的核心原因：catch参数传递错误

你当前代码中.catch(console.log('error'))的写法是立即执行console.log('error')，而非将打印逻辑作为回调函数传给catch。此时catch接收到的是console.log的返回值undefined，自然无法处理后续抛出的异步错误，才会出现未捕获的拒绝报错。
正确写法应该是传入箭头函数包裹错误处理逻辑：

.catch(err => console.log('error', err))

• 404报错原因

1. 你传入的getSubmission参数ozbtjrr是无效的Reddit submission ID：Reddit公开的帖子ID为6位base36字符，你提供的ID为7位，多了末尾字符自然请求不到对应资源返回404。
2. 确认初始化snoowrap的参数是否正确：检查clientId、clientSecret、用户名密码是否和你在Reddit开发者后台申请的配置完全一致，userAgent格式是否符合Reddit要求。

• getSubmission is not a function报错原因

1. 重复导入导致实例化异常：你已经在文件顶部通过import Snoowrap from 'snoowrap'导入了依赖，又在函数内部重复const snoowrap = require('snoowrap')，大小写不一致+重复导入可能导致实例化出的r对象不是正常的snoowrap实例，自然没有对应方法。
2. 初始化失败：如果授权参数错误，snoowrap实例化异常也会导致方法丢失，不存在需要紧跟.author才能调用的说法，getSubmission本身就是snoowrap实例的顶层方法。

修复后完整代码 #

import React, { useState } from "react";
import Snoowrap from "snoowrap";

function Homepage(props) {
  const [LinkInput, setLinkInput] = useState("");

  const updateInputValue = (evt) => {
    setLinkInput(evt.target.value);
  };

  const handleLinkVerify = () => {
    const r = new Snoowrap({
      userAgent: 'windows:testbot:v1.0.0 (by /u/xxxx)',
      clientId: '替换为你的正确clientId',
      clientSecret: '替换为你的正确clientSecret',
      username: "替换为你的Reddit用户名",
      password: "替换为你的Reddit密码",
    });
    // 替换为有效的6位帖子ID
    r.getSubmission("ozbtjr")
       .then(submission => console.log(submission.author.name))
       .catch(err => console.log('请求出错：', err));
  }

  return (
        <>
          <button
            variant="outline-light"
            id="analyze-button"
            size="lg"
            onClick={() => handleLinkVerify()}
          >
            Analyze
          </button>
        </>
  );
}
export default Homepage;

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