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

Posted 2023-02-22

【中文标题】使用 axios 向服务器发出请求会冻结 React Native 应用程序

【英文标题】：Making requests to server with axios freezes React Native app

【发布时间】：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());

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

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

【参考方案1】：

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

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

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

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

【讨论】：

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