Я работаю над проектом react. В моем приложении на панели навигации я отображаю меню. Здесь я хочу отобразить некоторый текст или сообщение. Это сообщение должно быть загружено из API во время загрузки страницы. Ниже приведен мой код.

 const NavigationBar = ({ className }) => (
  <div className={className}>
    <NavigationBarSection>
      <NavigationTitle to="/">
        <ReactSVG path={ipmLogoUrl} style={{ width: 24 }} />
      </NavigationTitle>
      <NavigationItem exact to="/">
        Import
      </NavigationItem>
      <NavigationItem to="/timephase">Timephase</NavigationItem>
      <NavigationItem to="/sync-progress">Sync Progress</NavigationItem>
      <NavigationItem to="/parameters">Parameters</NavigationItem>
    </NavigationBarSection>
    <div>I want to display message from API</div>
    <NavigationBarSection>
      <Dropdown
        label={
          <BlockNavigationItem>
            <Icon icon={<Help />} />
          </BlockNavigationItem>
        }
      >
        <DropdownItem
          target="_blank"
          href="/api/replenishment-parameters/keycode-parameters-template"
        >
          Download Damp;F Keycode Template
        </DropdownItem>
        <DropdownItem
          target="_blank"
          href="/api/replenishment-parameters/sims-keycode-parameters-template"
        >
          Download SIMS Keycode Template
        </DropdownItem>
        <DropdownItem
          target="_blank"
          href="/api/replenishment-parameters/timephase-template"
        >
          Download Timephase Template
        </DropdownItem>
        <DropdownItem
          rel="noopener noreferrer"
          target="_blank"
          href="https://kmartonline.atlassian.net/wiki/x/5ICICg"
        >
          Help and Support
        </DropdownItem>
      </Dropdown>

      <UserProfile />
    </NavigationBarSection>
  </div>
);
  

Может ли кто-нибудь помочь мне завершить это? Любая помощь была бы уместна. Спасибо

Я создал проект с использованием axios и reactjs, пожалуйста, проверьте на GITHUB

Фрагмент из проекта:-

ПОЛУЧИТЬ ВЫЗОВ

    axios.get('/posts')
        .then(response => {
            const posts = response.data.splice(0, 4);
            const updatedPosts = posts.map(post => {
                return{
                    ...post,
                    author: 'Max'
                }    
            });
            this.setState({posts: updatedPosts});
        })
        .catch(error => {
            console.log(error);
            // this.setState({error: true});
        })
  

POST ВЫЗОВ

 let data = {
    title: this.state.title,
    body: this.state.body,
    author: this.state.author
}
axios.post('/posts', data)
    .then(response => {
        // console.log(response)
        // this.props.history.push('/posts');
        this.props.history.replace('/posts');
        // this.setState({submitted: true});
    })    
  

Что касается вашего вопроса, то по умолчанию используется Axios. Узел.JS также имеет встроенный обработчик запросов, называемый Fetch API, и вы можете прочитать больше об этом здесь.

Как работает каждый из них:

Извлекать API:

Axios:

Различия:

1. С axios вы автоматически получаете объект JSON.

Если бы вы хотели получить ответ JSON при вызове с помощью Fetch, вам нужно было бы сначала передать его в .json() :

 fetch('https://api.punkapi.com/v2/beers/1')
.then(response => response.json())
.then(data => console.log(data));
  

Axios уже делает это за вас.

2. Axios лучше справляется с ошибками:

Допустим, вы вызвали fetch API с неправильным URL:

Запрос вернул ошибку 400, но Fetch API все еще регистрировал данные.

Теперь давайте попробуем axios:

Это намного лучше! Я получаю ожидаемую ошибку, и я не получил пустые данные обратно.

3. Мониторинг запросов POST:

Axios позволяет отслеживать запросы POST:

Допустим, вы отправили запрос, но он занимает слишком много времени. С Fetch вы не будете знать, работает ли он просто медленно или ваш код поврежден. Axios позволяет отслеживать ваши запросы.

 axios.post('https://api.punkapi.com/v2/beers/1', data, {
  onUploadProgress: ({ total, loaded }) => {
    // Update progress
  },
});
  

Axios с компонентами React:

Вот отличное руководство по теме: использование Axios с React.

По сути, вы определяете функцию внутри своего компонента, которая использует Axios, а затем вызываете ее везде, где вам нужна эта функциональность. Для запроса GET было бы наиболее подходящим вызвать axios.get() in componentDidMount() . Для других запросов вы бы определили отдельную функцию.

Краткие сведения:

Существует много других аспектов Axios и его преимуществ перед Fetch, а также существуют другие пакеты, похожие на Axios. Возможно, вы захотите установить его и поиграть с ним.

Для этого вы можете использовать react-fetch-hook. Вот так:

 const NavigationBar = ({ className }) => {
  const {data: message} = useFetch("<api_url_for_message>");
  return <div className={className}>
    ...
    <div>{message}</div>
    ...
  </div>
}
  

Необходим React 16.8.0.