reactjs - fetchを使って共通のAPI呼び出し関数を作る方法

私はどこからでも自分のAPI呼び出しをすべて処理する共通の関数を作ろうとしています

私はAPIコールを行うために、react": "^16.8.6" と fetch を使っています

これまでに私がやろうと考えたことは

Helper.js

export function ApiHelper(url, data = {}, method = 'POST') {
    let bearer = 'Bearer ' + localStorage.getItem('user_token');
    var promise = fetch(url, {
        method: method,
        withCredentials: true,
        // credentials: 'include',
        headers: {
            'Authorization': bearer,
            'X-FP-API-KEY': 'chaptoken', 
            'Content-Type': 'application/json'
        }
    })
    .then(res => res.json())
    .then(
        (result) => {
            console.log(result);
        },
        (error) => {
            error = error;
        }
    )
}

export function AnyOtherHelper() {
    return 'i am from helper function';
}

そしてここが私がこの関数を呼び出している場所です

componentDidMount() {
    let url = `http://localhost/project/api/getdata`;
    let op = ApiHelper(url);
}

私が `then` の中で結果をコンソールに出力すると、適切な結果が得られますが、私が返したいのはそのレスポンスです。どのようにすればよいか、この部分で困っています。グローバル変数に結果を保存しようとしましたが、うまくいきませんでした。また、Promise が解決されたときにのみレスポンスを返す必要があります。

回答 #1

あなたはヘルパー関数から非同期呼び出しを行っているので、ヘルパー関数から次のようにプロミスを返す必要があります -

export function ApiHelper(url, data = {}, method = 'POST') {
    let bearer = 'Bearer ' + localStorage.getItem('user_token');
    return fetch(url, {  // Return promise
        method: method,
        withCredentials: true,
        // credentials: 'include',
        headers: {
            'Authorization': bearer,
            'X-FP-API-KEY': 'chaptoken',
            'Content-Type': 'application/json'
        }
    })
        .then(res => res.json())
        .then((result) => {
            console.log(result);
            return result;
        }, (error) => {
            error = error;
        })
}

使用方法

componentDidMount() {
    let url = `http://localhost/project/api/getdata`;
    ApiHelper(url)
    .then(resposnse => {
        console.log(resposnse);
    });
}