时间戳

首页 > 解决方案 > 在 React 中调用 API 的 httpRequest 的正确位置在哪里？

javascript - 在 React 中调用 API 的 httpRequest 的正确位置在哪里？

问题描述

在使用 React 时我应该在哪里调用 API 有点困惑，我一直在调用 componentDidMount 并在那里执行 setState，如下所示：

  constructor(props) {
    super(props);

    this.state = {info: []};
  }

  componentDidMount() {
    this.ObtenerVariables(this.props.enlace1, this.props.enlace2);
  }
  ObtenerVariables(consulta1, consulta2){
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', consulta1,false);
    httpRequest.send();
    var cons1 =JSON.parse(httpRequest.response);
    var cantArticulos = cons1.data[0].cantidad_articulos;

    httpRequest.open('GET', consulta2,false);
    httpRequest.send();
    var cons2 =JSON.parse(httpRequest.response);
    var cantAutores = cons2.data[0].cant_autores;

    this.setState({ info: [cantArticulos, cantAutores] })
  }

然后像这样访问信息 this.state.info[0]

但是我在网上看到有人说这不好，因为它会给您带来性能问题，这与我想要的完全相反，我需要网站加载速度更快。
这是一种不好的做法，是否会影响网站的性能？有什么更好的方法来做到这一点？考虑到这个网站需要发出大约 16 个 API 请求。

标签： javascriptreactjs

解决方案

Api 调用的最佳位置是componentDidMountforclass component和useEffect(() => { /* ... */}, [])for functional component。

请检查以下两个示例：

类组件

import React from "react";
import axios from 'axios';

export default class PostListPage extends React.Component {
    state = {
        posts: []
    };

    componentDidMount() {
        axios.get(`https://jsonplaceholder.typicode.com/posts`)
            .then(res => {
                const posts = res.data;
                console.log(posts);
                this.setState({posts:posts});
            })
    }

    render() {
        return (
            <React.Fragment>
                <ul>
                    {
                        this.state.posts? this.state.posts.map(post => <li key={post.id}>{post.title}</li>) : null
                    }
                </ul>
            </React.Fragment>
        );
    }
}

功能组件

import React, {useEffect, useState} from "react";
import axios from 'axios';

export default function PostListPage() {
    const [posts, setPost] = useState([]);
    let signal = axios.CancelToken.source();

    useEffect(() => {
        let isSubscribed = true;
        axios.get('https://jsonplaceholder.typicode.com/posts', {
            cancelToken: signal.token,
        })
            .then(res => {
                const posts = res.data;
                setPost(posts);
            }).catch(err => {
            console.log(err);
        });
        return function cleanup() {
            isSubscribed = false;
            signal.cancel('Api is being canceled');
        }
    }, []);

    return (
        <React.Fragment>
            <ul>
                {
                    posts? posts.map(post => <li key={post.id}>{post.title}</li>) : null
                }
            </ul>
        </React.Fragment>
    );
}

推荐阅读