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操作完成之前返回，因此返回null值。在这种情况下，我将如何掌控异步方面？我尝试了async.series（[]），却一无所获。

谢谢

Answer 1

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

但是，通过返回async函数，您将返回一个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调用返回一个承诺。因此，在您的函数中，您可以执行以下操作

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;中，行将同步运行，但承诺没有得到解决。

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

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

4 个答案: