我是ReactJS的初学者,我试图改善代码的编写,最后进入了API调用部分,我想提高API调用的可重用性并将它们设置为特定的文件夹像utils / APIcalls.js一样,但我不知道执行此操作的最佳方法和正确方法,我有以下API调用getItems():

Home.jsx

export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            'items': [],
            isLoading: false,
            error: null,
        };
    }

    componentDidMount() {
        this.getItems()
        this.refresh = setInterval(() => this.getItems(), 100000);
    }

    componentWillUnmount() {
        clearInterval(this.refresh)
    }

    getItems() {
        this.setState({ 'isLoading': true });
        fetch('https://xxx/api/article/')
            .then(results => {
                if (results.ok) {
                    return results.json();
                } else {
                    throw new Error('Something went wrong ...');
                }
            })
            .then(results => this.setState({ 'items': results, 'isLoading': false }))
            .catch(error => this.setState({ error, isLoading: false }));
    }

    render() {
        const { isLoading, error } = this.state;

        if (error) {
            return <p>{error.message}</p>;
        }

        if (isLoading) {
            return <Loading />
        }

        return (
            <div className="container" >
                <div className="row align-items-start">
                    <Principal items={this.state.items} />
                </div>

                <hr />

                <div className="row align-items-start">
                    <Secondary items={this.state.items} />
                </div>
            </div>
        );
    }
}


我在多个地方使用相同的调用,是否有任何方法可以全局设置这些调用,并在代码的其他位置更轻松地调用它们?

为了解决这个问题,我使用axios创建可重用的函数:

我创建了一个名为utils的文件夹,在该文件夹内,我创建了一个名为apiConfig.js和apiCalls.js的文件:

从'./apiConfig'导入API

export default {
    getArticles: () => {
        return API.get('article')
            .then(res => res.data)
    },
    getUser: () => {
        return API.get('user')
            .then(res => res.data)
    }
}


之后,我使用这种方式在组件中调用该函数:

componentDidMount() {
        this.getItems()
    }

    getItems() {
        this.setState({ 'isLoading': true });
        API.getArticles().then(items => this.setState({ items, 'isLoading': false }))
            .catch(error => this.setState({ error, isLoading: false }));
    }

最佳答案

我同意所有评论,您的“ ./utils/API.js”将如下所示:

export default {
  getItems: () => {
    return fetch('https://xxx.api/article')
      .then(res => res.json());
  },
  otherApiCall: (params) => {
  }
}


该组件如下所示:

import API from '../utils/API';

componentDidMount() {
  const items = API.getItems();
  this.setState({ items });
}


无论将其导入到哪里,此调用都将导致产生项目,您可以在此处或在组件中添加错误处理。正如HolyMoly所说,在Redux-Thunk中,我通常在操作(发送呼叫的地方)中处理此问题

09-30 15:23
查看更多