Где централизовать все запросы fetch () в React? И доступ к контексту

Question

У меня есть приложение реагирования, в котором я централизовал все свои вызовы API в файле. js следующим образом:

export async function api_call_1(a, b) {
    //builds and sends a fetch request
    return someValue;
}

export async function api_call_2(c, d) {
    //builds and sends a fetch request
    return someOtherValue;
}

export async function api_call_3(e, f) {
    //builds and sends a fetch request
    return anotherValue;
}

В моих компонентах React я вызываю эти функции как

async componentDidMount() {
    const data = await api_call_1(a, b);
    this.setState({data: data})
}

Теперь дело в том, что я хочу использовать некоторые данные, хранящиеся в определенном c контексте (в частности, токен аутентификации, отправленный в вызове заголовка).

Есть ли способ доступа к контексту в этих глобальных вызовах API или я должен просто передать его на все мои вызовы?

В общем, ищем лучшие практики для обработки всех этих вызовов на мой внутренний API.

Спасибо!

Answer 1

Класс API в src / API. js

class API {
    async getProjects() {
        var result = 
            fetch("http://your-hosting.com/api/projects")
            .then((response) => response.json())
            .then((a) => a);
        return result;
    }
}
export default API;

Класс проектов в src / Projects. js

import React, { Component } from 'react';
import API from './API.js'

class Projects extends Component {
    state = { 
        projects: []
    }

    async componentDidMount() {
        new API().getProjects().then(result=> {
            this.setState({ projects: result });
        });
    }

    //render function here
}
export default Projects;