javascript - 如何将外部数据获取 api 导入 react componentDidMount 方法

Question

我试图在我的一个 react 组件中整合一些代码，因为我的 componentDidMount 方法变得有点冗长。这给了我创建一个 api 的想法，该 api 可以为整个应用程序获取所有数据。

我遇到了一个异步问题，我不确定如何解决。

我创建了单独的 api 文件 (blurt.js):

exports.getBlurts = function() {
    var blurtData = null;
    fetch('/getblurts/false', {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
        })
        .then(res => res.json())
        .then((data) => {
            blurtData = data;
        });

        return blurtData;
    }

并通过

将其导入我的(.jsx)组件

import blurtapi from '../api/blurt.js';

问题是，当我在 componentDidMount() 中调用 blurtapi.getBlurts() 时，该值返回为 null。但是，如果我像这样将数据写入控制台:

.then((data) => {
    console.log(data);
});

一切都是应该的。因此，该函数在 db 操作完成之前返回，因此返回空值。在这种情况下，我将如何控制异步方面？我尝试了 async.series([]) 并没有得到任何结果。

谢谢

Answer 1

所以 fetch 返回一个 promise，它是 async ，所以任何异步代码都会在同步代码之后运行。所以这就是你一开始得到 null 的原因。

然而，通过返回异步函数，您返回了一个 promise 。

因此这段代码:

exports.getBlurts = async () =>  {
    const data = await fetch('/getblurts/false', {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
        });
        const jsonData = await data.json();
        return jsonData;
    }

要检索任何 promise 数据，您需要 then 函数，所以在你的 componentDidMount 中，你会做:

componentDidMoint() {
blurtapi.getBlurts()
.then(data => console.log(data)) // data from promise 
}

promise :

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

异步/等待:

https://javascript.info/async-await

我希望这是有道理的。