使用获取API时，AJAX调用期间显示微调

Question

在我的项目，我迁移到反应，所以不加载JQuery的。由于我没有JQuery的了，对于AJAX调用我使用取。使用jQuery的AJAX调用，因此很容易将光标更改为微调我可以挂钩的开始和结束。我找不到类似的提取挂钩。有没有一种方法比在每个单独的AJAX调用改变它这样做其它？

谷歌搜索的很多只是不停地寻找有关... JQuery的答案。

Answer 1

我已经使用手动设置一个“加载”标志为真中发现的主要问题/错误是很容易错误地跳过设置为false标志和您的应用程序想绞死），而在另一方面，我不”想弄糟当几个Ajax请求被称为并行，当你想跟踪一些这样的人来更加困难，但在其他情况下，你想沉默的请求。

我创建了一个名为反应，承诺跟踪器更自动化的方式来处理这个microlibrary。这个怎么运作

安装诺言跟踪器

npm install react-promise-tracker --save

实现一个简单的负载指示组件（你可以添加你需要它的样式），并与promiseTrackerHoc把它包

import { promiseTrackerHoc } from 'react-promise-tracker';

const InnerLoadingIndicator = props => (
   props.trackedPromiseInProgress &&
   <h1>Hey some async call in progress ! Add your styling here</h1>
);

export const LoadingIndicator = promiseTrackerHoc(InnerLoadingIndicator);

实例它在你的应用程序根目录组件：

render(
  <div>
    <App />
    <LoadingIndicator/>
  </div>,
  document.getElementById("root")
);

每当你想跟踪获取或任何基于承诺的呼叫（包括异步/等待），刚刚与反应，承诺跟踪器功能trackPromise包装它：

import { trackPromise } from 'react-promise-tracker';

export class MyComponent extends Component {
  componentWillMount() {
    trackPromise(
      userAPI.fetchUsers()
        .then((users) => {
          this.setState({
            users,
          })
        })
    );
  }

  // ...
}

更多资源： - 教程一步步骤（包括添加一个好看的微调）：https://www.basefactor.com/react-how-to-display-a-loading-indicator-on-fetch-calls

• 现场样品：https://stackblitz.com/edit/react-promise-tracker-default-area-sample
• Github上页：https://github.com/Lemoncode/react-promise-tracker