突然出现Uncaught (in promise) TypeError报错，此前代码运行正常

先抓最扎眼的问题：你调用makeTableAllJokes的方式完全错了！

看你这段代码：

document.getElementById("jokeTable").innerHTML = html+makeTableAllJokes()(data);

而你的makeTableAllJokes是个普通的接收data参数的函数：

function makeTableAllJokes(data) {
  createTable = data.map(function (e) {
    return (`<tr><td> ${e.id} </td><td> ${e.joke} </td><td> ${e.topic} </td>`);
  }).join(" ");
  return createTable;
}

你写成makeTableAllJokes()(data)——先调用不带参数的makeTableAllJokes()，这时候函数里的data直接是undefined，自然触发Cannot read property 'map' of undefined的错误，后面的(data)更是多余操作（相当于把函数返回的字符串当函数调用，只会添乱）。

第一步：紧急修复函数调用 #

把代码改成正常传参的形式：

document.getElementById("jokeTable").innerHTML = html + makeTableAllJokes(data);

这大概率能解决你当前的报错。

后续潜在问题排查（如果修复后仍有问题） #

1. 接口返回结构变了
   之前接口可能直接返回数组，但现在可能返回的是包裹数组的对象（比如{jokes: [...]}或{data: [...]}）。这时候你得先从返回的data里提取出真正的数组再传给函数。
   举个例子，如果接口返回{jokes: [....]}，代码要改成：

   .then(data => {
     document.getElementById("jokeTable").innerHTML = html + makeTableAllJokes(data.jokes);
   });
   

   建议把你注释掉的console.log("data", data);打开，看看返回的data到底是什么结构。

2. 没处理请求错误
   你的fetch代码完全没做错误捕获！如果网络故障、后端报错，res.json()会直接抛出错误，或者返回非预期数据。补上错误处理：

   fetch(url + 'all')
     .then(res => {
       if (!res.ok) {
         throw new Error('请求失败，状态码：' + res.status);
       }
       return res.json();
     })
     .then(data => {
       console.log("data", data);
       document.getElementById("jokeTable").innerHTML = html + makeTableAllJokes(data);
     })
     .catch(error => {
       console.error('请求过程出错：', error);
     });
   

   这样就能及时发现请求环节的问题，不会让错误默默扩散。

3. 确认html变量的合法性
   虽然这不是当前报错的原因，但如果html变量未定义或值异常，后续也会出问题，建议检查一下这个变量的内容是否符合预期。

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