React项目async/await在移动端Chrome/Edge失效，如何配置Babel/Webpack解决

首先排除async/await兼容问题 #

Chrome 94、Edge 93本身已原生支持ES2017的async/await语法，且你使用npx create-react-app创建的项目默认已经通过Babel完成了常用ES特性的转译，不需要额外修改Babel或Webpack配置适配这两个浏览器版本。

最可能的故障原因 #

你当前API层的baseURL配置为http://localhost:3000/api/v1，桌面端运行时前端、后端都部署在你的电脑上，localhost指向电脑本身，请求可正常发送。但手机访问页面时，localhost指向的是手机自身，而手机上没有运行后端服务，自然请求失败，表现为功能无法使用。

修复方案 #

1. 确保你的电脑和手机连接到同一个WiFi网络
2. 查看你电脑的局域网IP地址：Windows系统可在cmd中执行ipconfig查看，macOS/Linux可执行ifconfig查看，一般为192.168开头的地址
3. 将API层的baseURL修改为http://[你的电脑局域网IP]:3000/api/v1
4. 确保你的后端服务启动时绑定的是0.0.0.0而非127.0.0.1，同时关闭电脑防火墙或开放3000端口的访问权限
   修改后手机再访问前端页面即可正常请求后端接口。如果是后续打包部署到公网服务器，直接将baseURL替换为公网服务器的对应地址即可。

低版本浏览器兼容方案 #

如果后续需要适配不支持async/await的更低版本浏览器，不需要手动修改Babel或Webpack配置，只需修改项目根目录package.json中的browserslist字段，添加需要兼容的浏览器版本即可，create-react-app会自动根据该配置调整转译规则，完成特性降级。

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