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

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

我遇到了一个异步问题，我不知道如何解决

我创建了单独的api文件（blurt.js）：

并通过

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

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

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

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

---

谢谢，fetch返回一个承诺，它是异步的，所以任何异步代码都将在同步代码之后运行。这就是为什么你一开始会得到null

但是，通过返回异步函数，您将返回一个承诺

因此，该代码：

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 
}

承诺：

异步/等待：

---

我希望这是有意义的。

fetch call返回一个承诺。因此，在你的函数中，你可以这样做

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

}

在组件中执行此操作

componentDidMount(){

  blurtapi.getBlurts().then((data)=>{

 this.setState({data})
 }
 }

---

在您的示例中，

返回blurtData行将在承诺解决之前同步运行

将
getBluts
修改为：

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

在
componentDidMount
中：

componentDidMount() {
  getBlurts.then((data) => {
    // data should have value here
  });
}

或

您可能只需要
返回fetch
，或者
返回
中的blurtData
。然后
我认为这是有效的。然而，它却回复了一个承诺（正如预期的那样）。我以前从未见过这种情况。在promise对象中，它确实包含了我的记录，太棒了。你能详细说明一下你的答案吗？无论哪种方式，一旦我彻底测试完毕，我将标记为解决方案。您需要添加一个
。然后
或
const data=wait blurtapi.getBlurts
，因为它现在返回了一个承诺。@Gaʀ。函数不返回承诺。它等待
data.json（）
的结果，然后返回所需的数据。实际上，我已经尝试过了。它抛出错误GetBluts.then不是函数。
componentDidMount() {
  getBlurts.then((data) => {
    // data should have value here
  });
}

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

async componentDidMount() {
  const response = await blurtapi.getBlurts();
}

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

componentDidMount() {
  const data = blurtapi.getBlurts()
    .then(data => {
      // Do something or return it
      return data;
    });
}