IT技术 - 如何使用 fetch 制作常用的 API 调用函数 - 吾爱随笔录

我正在尝试制作通用功能，该功能将处理来自任何地方的所有 API 调用

我正在使用 react": "^16.8.6" 和 fetch 进行 api 调用

到目前为止，我想出的是

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得到解决时，我才必须返回响应。

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