在ReactJs中将值从一个请求传递到另一个请求

Question

我需要帮助，因为我不能使用单独的函数来生成令牌——它给出了一个承诺，而不是一个值。我被告知值只能在函数内部使用。

对于每个请求，我在第一个请求中生成一个新的令牌，然后将该令牌传递给第二个请求。

我尝试创建一个单独的函数来生成令牌，但fetch返回一个承诺。

结果，我做了一个这么大的函数，它能工作。是否有一种方法可以为第一个请求创建一个单独的函数，并将结果传递给第二个请求?

第一个令牌生成函数经常需要，而第二个请求总是不同的。

fetch('/api/token', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({ 'id': '5' }),
})
.then(response => response.json())
.then(result => {
fetch('/api/reviews', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + result.token,
},
body: JSON.stringify({ 'limit': 10 }),
})
.then(response => response.json())
.then(result => {
this.setState({ data: result.data });
})
})

Answer 1

创建一个返回promise的函数

async function getToken() {
return await fetch('/api/token', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({ 'id': '5' }),
})
.then(response => response.json())
.then(result => {
return Promise.resolve(result.token);
}).catch(error => {
return Promise.reject(error);
})
}

async function getReview() {
const token = await getToken().then(token => {
return token
}).catch(error => {
//handle error
});
fetch('/api/reviews', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token,
},
body: JSON.stringify({ 'limit': 10 }),
})
.then(response => response.json())
.then(result => {
this.setState({ data: result.data });
})
}

我没有测试这段代码，但是你明白了

我会尽快测试并更新我的答案

Answer 2

是的，您可以使用async / await。它将允许你将API响应的词法作用域从.then的"回调地狱"中移除。并进入父函数作用域。

获取令牌的单独函数将返回一个承诺，但随后请求函数将等待承诺执行并解析后再继续。

async function fetchToken() {
const response = await fetch('/api/token', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({ 'id': '5' }),
})
return await response.json();
}
async function getReviews() {
const response = await fetch('/api/reviews', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + result.token,
},
body: JSON.stringify({ 'limit': 10 }),
})
const result = await response.json();
this.setState({ data: result.data });
}

另外，如果在每次评审调用时不需要进行令牌调用，那么您可以记住这个值，并使用这个记住的值。

const tokenMemo = useMemo(async () => await getToken(), []);
async function getReviews() {
const response = await fetch('/api/reviews', {
// ...
'Authorization': 'Bearer ' + tokenMemo,
// ...
}