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

Question

我正在尝试在我的一个反应组件中合并一些代码，因为我的componentDidMount方法有点冗长。 这让我想到了创建一个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操作完成之前返回，因此为null值。 在这种情况下，我将如何统计异步方面？ 我尝试了async.series（[]）并没有得到任何结果。

谢谢

Answer 1

因此fetch返回一个promise，它是异步的，所以任何异步代码都会在同步代码之后运行。 所以这就是你最初得到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;
    }

要检索任何承诺数据，您需要then函数，因此在componentDidMount中，您将执行以下操作：

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

公司承诺：

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

异步/等待：

https://javascript.info/async-await

我希望这是有道理的。

Answer 2

fetch调用返回一个promise。 因此，在你的功能中你做这样的事情

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中执行此操作

componentDidMount(){

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

 this.setState({data})
 }
 }

Answer 3

在你的例子中return blurtData; 在解决promise之前，line将同步运行。

将getBlurts修改为：

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
  });
}

Answer 4

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;
    });
}