React中使用axios调用API无响应，Network状态200但then回调不执行

问题原因 #

• getData为普通函数，调用时内部this指向丢失，执行this.setState时会抛出异常，你没有添加错误捕获逻辑，所以看不到报错，then回调会直接中断，因此你在then中打印任何内容都没有输出。
• setState是异步API，调用后不会立刻修改this.state的值，你在componentDidMount中调用完getData就立刻打印this.state，此时请求还未返回、setState也未执行，拿到的自然是初始的空值。
• 没有为Promise添加catch捕获逻辑，无论是请求异常还是回调内部代码报错都无法感知。
• 若你配置了全局axios响应拦截器，也可能是拦截器中没有将响应正确return，导致then无法拿到返回结果。

修复方案 #

修正getData的this指向，添加错误捕获，将state打印逻辑放到setState的更新回调中即可，修复后代码如下：

constructor(props) {
    super(props);
    this.state = {
        team: {}
    }
}

// 改为箭头函数，自动绑定当前组件实例的this
getData = () => {
    axios.get('http://game.test/api/characters')
        .then(response => {
            // setState第二个参数为更新完成后的回调，可拿到最新的state
            this.setState({ team: response.data.characters }, () => {
                console.log('更新后的state：', this.state)
            });
        })
        // 添加错误捕获，出现问题会直接打印
        .catch(err => {
            console.error('处理出错：', err)
        })
}

componentDidMount() {
    this.getData();
    // 此处打印的是请求发出前的初始state，属于正常情况
    console.log('初始state：', this.state);
}

如果还是没有进入then回调，可检查全局axios拦截器逻辑，确认响应拦截器中执行完自定义逻辑后有正常return response。

内容的提问来源于stack exchange，提问作者Victor Nițică