跟随JS教程编写代码报Uncaught (in promise) SyntaxError求助

数据老陈

2026-9-3

问题原因

报错核心是buildRequestUrl函数存在书写疏漏：

该箭头函数使用大括号包裹函数体，但没有写return语句返回拼接好的URL，因此函数调用后的返回值为undefined
后续执行fetch(undefined)时会默认请求当前页面地址，返回的响应是HTML格式的页面文档，并非合法JSON结构，此时调用Response.json()方法解析，就会触发JSON.parse: unexpected character at line 1 column 1的错误
由于async函数内的异步错误会沿await链路向上冒泡，控制台最终将错误落点标记到console.log("finished!");所在行，这并非错误真正发生的位置。

除此之外你的代码还存在一个参数格式问题：直接将数组类型的categories拼接到URL中时，数组会默认转为逗号分隔的字符串，不符合接口的参数要求，会导致分类筛选失效。

修复方案

给buildRequestUrl函数添加return语句，确保正确返回拼接完成的请求地址
修正分类参数的拼接格式，匹配接口要求
（可选）添加异常捕获和响应状态校验，方便后续排查问题

修复后的完整可运行代码：

const getDataFromForm = () => {
  const requestObj = {
    firstName: "Humaid",
    lastName: "Ahamed",
    categories: ["nerdy"],
  };
  return requestObj;
};

const buildRequestUrl = (requestData) => {
  return `http://api.icndb.com/jokes/random?firstName=${requestData.firstName}&lastName=${requestData.lastName}&limitTo=[${requestData.categories.join(',')}]`;
};

const requestJokeAnotherMethod = async (url) => {
  const response = await fetch(url);
  if (!response.ok) throw new Error(`请求异常，状态码：${response.status}`);
  const jsonResponse = await response.json();
  const joke = jsonResponse.value.joke;
  postJokeToPage(joke);
};

const postJokeToPage = (joke) => {
  console.log(joke);
};

const processJokeRequest = async () => {
  try {
    const requestData = getDataFromForm();
    const requestUrl = buildRequestUrl(requestData);
    await requestJokeAnotherMethod(requestUrl);
    console.log("finished!");
  } catch (err) {
    console.error('流程执行出错：', err);
  }
};

processJokeRequest();

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