使用 axios 向服务器发出请求会冻结 React Native 应用程序答案

【问题标题】：Making requests to server with axios freezes React Native app使用 axios 向服务器发出请求会冻结 React Native 应用程序
【发布时间】：2019-12-02 14:08:24
【问题描述】：

当用户单击按钮时，我试图从某个类别中获取帖子，但如果您单击按钮两次，UI（交互元素、导航）会完全冻结几秒钟。

我尝试删除 async/await 并使用 Promise 进行操作，结果相同。

const api = axios.create({
  baseURL: 'http://192.168.1.33:5000/',
  timeout: 3000,
});
// Action
export const getTrends = () => async (dispatch) => {
  dispatch({
    type: actions.REQUEST_TRENDS
  });
  const r = await api.post('getTrends');
  const response = r.data;
  return dispatch({
    type: actions.RECEIVE_TRENDS,
    articles: response.payload.data,
    count: response.payload.count
  });
};

// Button
            <Button
              vertical
              active={tab === 'trends'}
              onPress={() => {
                this.setState({ tab: 'trends' });
                this.reqTrends();
              }}
            >
              <Icon name="md-trending-up" />
              <Text>{i18n.t('TRENDING')}</Text>
            </Button>

// reqTrends
async reqTrends() {
    this.props.dispatch(getTrends());
}

预期结果：数据在后台加载，而用户仍然可以与其他元素交互

实际结果：用户必须等待请求完成才能使用其他任何东西

【问题讨论】：

标签： javascript react-native redux axios redux-thunk

【解决方案1】：

改变状态总是异步的。通过尝试以下操作设置状态后，您可能无法尝试继续进行 ajax 调用：

onPress={() => {
   this.setState({ tab: 'trends' }, () => this.reqTrends());
}}

这可确保流程不会重叠或产生内存泄漏。

另一个因素是您通常应该将异步函数包装在 try/catch 块中。该错误可能出现在它自身的函数内部。

【讨论】：

刚刚试了下，还是卡住了。当我完成项目时，我通常将异步函数包装在 try/catch 块中，据我从控制台看到的，根本没有错误。