Question

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

Answer 1

我同意所有注释，您的'./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中，我通常在操作（发送呼叫的地方）中处理此问题

Answer 2

我通常使用这些。

API / Axios_Api.js

import axios from 'axios';

const MYAPI= "YOUR API"
export const AXIOS_API = () => {
axios.get(MYAPI)
.then( res => res.data )
.catch (err => thorw{err})
};

如何创建可在Reactjs中重用的API utils

2 个答案: