gpt4 book ai didi

reactjs - 如何使用fetch实现常用API调用功能

转载 作者:行者123 更新时间:2023-12-02 00:16:09 24 4
gpt4 key购买 nike

我正在尝试创建通用函数来处理来自任何地方的所有 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 得到解决时才返回响应。

最佳答案

您正在从您的辅助函数进行异步调用,这意味着您必须像这样从您的辅助函数返回 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;
})
}

用法

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

关于reactjs - 如何使用fetch实现常用API调用功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56912931/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com