如何使用 fetch 制作通用 API 调用函数

Posted 2023-02-27

【中文标题】如何使用 fetch 制作通用 API 调用函数

【英文标题】：How to make common API call function using fetch

【发布时间】：2019-11-16 16:05:56

【问题描述】：

我正在尝试创建一个通用函数来处理我在任何地方的所有 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 中控制台结果时，我得到了适当的结果，但是我想要返回该响应，我该怎么做这部分让我很困扰 即使我尝试将结果存储在全局变量中，它也不起作用。 我也必须在承诺解决后才返回响应。

【参考方案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);
    );