如何正确添加带默认参数的异步事件处理器？

你遇到的问题核心在于事件监听器的参数传递规则：当浏览器触发点击事件时，会自动把PointerEvent对象作为第一个参数传递给绑定的事件处理函数。而你的fetchAsyncDefault函数把第一个参数定义为url，这就导致浏览器传入的事件对象被当成了url值，所以才会出现http://localhost:3000/[object%20PointerEvent]这种错误请求，最终触发CSP和Fetch失败的报错。

下面是几种可行的修复方案，按推荐程度排序：

1. 用匿名箭头函数包裹调用（最推荐） #

通过箭头函数作为事件监听器，在内部手动调用fetchAsyncDefault，这样就不会把事件对象传递给它，函数会使用你设置的默认参数：

document.getElementById('fetchAsyncDefault').addEventListener('click', () => fetchAsyncDefault());

2. 调整函数参数顺序，新增事件参数 #

把事件参数放在函数参数列表的最后，并给它设置默认值，这样即使浏览器传入事件对象，也不会覆盖你的url和data默认值：

const fetchAsyncDefault = async (
  url = 'https://httpbin.org/post',
  data = { node1: 'val1', node2: 'val2' },
  e = null // 新增事件参数，放在末尾并设默认值
) => {
  // 原有逻辑保持不变
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });
    const ret = await response.json();
    document.getElementById('status').innerHTML = 'success';
    document.getElementById('return').innerHTML = ret.data;
  } catch (error) {
    document.getElementById('status').innerHTML = 'failed';
    document.getElementById('return').innerHTML = error;
  }
};

这种方法适合你后续可能需要用到事件对象的场景，但如果不需要的话，第一种方法更简洁。

3. 使用bind忽略第一个参数 #

通过bind方法绑定null作为上下文，并传入undefined作为第一个参数，强制函数使用默认的url值：

document.getElementById('fetchAsyncDefault').addEventListener('click', fetchAsyncDefault.bind(null, undefined));

这种方法可以达到目的，但可读性不如前两种，一般不推荐。

修改后，点击第二个按钮时，fetchAsyncDefault会正确使用你设置的默认url和data发起POST请求，不会再出现参数被覆盖的问题。

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