如何在ReactJS中集成API？

Question

我正在做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 D&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>
);

有人可以帮我完成这个吗？任何帮助将是适当的。谢谢

Answer 1

我已经使用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});
        })

  

开机自检

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});
    })    

Answer 2

对于您的问题，Axios是默认标准。 Node.JS还具有一个称为 Fetch API 的内置请求处理程序，您可以here了解更多信息。

---

每个人的工作方式：

获取API：

Axios：

---

差异：

1。使用axios，您会自动获得一个JSON对象。

如果在使用Fetch调用时需要JSON响应，则需要先将其传递给.json()：

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

Axios已经为您做到了。

2。 Axios可以更好地处理错误：

假设您使用错误的URL调用了获取API：

请求返回了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
  },
});

---

带有React组件的Axios：

以下是有关该主题的出色教程：Using Axios with React。

基本上，您可以在组件内部定义一个函数，该函数使用Axios，然后在需要该函数的位置调用它。对于GET请求，最适合在axios.get()中调用componentDidMount()。对于其他请求，您将定义一个单独的函数。

---

摘要：

Axios还有许多其他方面，并且比Fetch具有优势，并且还有其他类似于Axios的软件包。您可能需要安装并试用它。

Answer 3

您可以使用react-fetch-hook。像这样：

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

需要反应16.8.0。