Axios调用getPosts时报Unexpected token语法错误如何解决？

错误原因定位 #

报错的核心原因是箭头函数的参数定义部分和箭头=>被不合理的换行拆分了。JS解析器处理第24行代码let data = await api.get('/').then(({ data })时，会误判该行是完整语句，导致第25行单独出现的=> data);被识别为非法语法，触发语法报错。

修复方案 #

方案1：修正换行问题 #

直接把箭头=>和参数定义放在同一行即可解决语法错误：

getPosts = async () => {
    let data = await api.get('/').then(({ data }) => data);
    this.setState({ posts: data })
}

方案2：优化为纯async/await写法（更推荐） #

你已经用了async/await语法，不需要和.then混用，代码可以更简洁易读：

getPosts = async () => {
    const { data } = await api.get('/');
    this.setState({ posts: data });
}

通用排查技巧 #

• 遇到Unexpected token类语法报错，优先看报错指向行的前后1-2行代码，检查括号、符号是否配对，是否有强制换行拆分了完整的语法结构
• 箭头函数的参数括号、=>符号、函数体不要无意义拆分换行，避免触发JS自动分号插入机制导致的异常解析

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