React onClick事件处理函数能返回Promise吗？内部IIFE有何作用

1. 内部IIFE的作用 #

这段代码里包裹异步逻辑的(async () => { ... })()是立即执行异步函数表达式，核心作用只有一个：

• 让外层的login保持普通同步函数的形态，同时内部可以使用await语法写异步请求逻辑，并且把异步逻辑的错误捕获完全收敛在IIFE内部，不会向外层抛出promise相关的异常。

这种写法是早期部分开发者的习惯：当时有不少人误以为React的事件处理函数不能是async类型，所以用IIFE包一层异步逻辑绕开，本质是没有必要的历史遗留写法。

2. 是否可以直接将login声明为async函数，移除内部IIFE #

完全可以，这种改法是现在更推荐的简洁写法，和原代码的运行行为完全一致。

改完的代码如下：

const login = async () => {
  try {
    //OAuth Step 1
    const response = await axios({
      url: `${apiPath}/twitter/oauth/request_token`, 
      method: 'POST'
    });
    
    const { oauth_token } = response.data;
    //Oauth Step 2
    window.location.href = `https://api.twitter.com/oauth/authenticate?oauth_token=${oauth_token}`;
  } catch (error) {
    console.error(error); 
  }
}

对应的JSX绑定逻辑不需要做任何修改，点击按钮时会正常触发逻辑：

<img className='signin-btn' onClick={login} alt='Twitter login button'/>

补充说明 #

只要你像示例代码一样在async函数内部写了完整的try/catch捕获异步操作的错误，就不会出现未捕获的Promise异常，和原IIFE写法的执行效果没有任何区别。React本身不会对事件处理函数的返回值做任何处理，不管你返回undefined还是Promise，都不会影响组件运行。

只有当你的团队ESLint配置了强制禁止事件处理函数为async函数的规则时，才需要用IIFE的写法绕开规则，从JavaScript和React本身的运行逻辑来说，这层IIFE完全是冗余代码。

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