Question

我的应用程序中需要多个获取请求才能从不同的集合中获取数据。因此，我想使用promises来使它工作。我从未使用过promises，尽管我对stackoverflow和其他网站进行了研究，但我还是无法使用它。

基本上，我需要两个获取请求，我想将这些请求的结果保存到两个不同的状态。

这就是我现在所拥有的：

getFormData () {
    fetch('/formdata', {
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
    }})
        .then(res => res.json())
}

getIcons () {
    fetch('/icons', {
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
    }})
        .then(res => res.json())
}

getData () {
    return Promise.all([this.getFormData(), this.getIcons()])
}

componentDidMount () {
    this.getData()
        .then(([formdata, icons]) => {
            console.log(form + "  " + icons);
        })
         .catch(err => console.log('There was an error:' + err))
}

但是这没用。我也尝试将promise放在我的componentDidMount()生命周期方法中，如下所示：

componentDidMount () {
    return Promise.all([this.getFormData(), this.getIcons()])
        .then(([formdata, icons]) => {
            console.log(formdata + "  " + icons);
        })
         .catch(err => console.log('There was an error:' + err))
}

但这并不适用。我想将数据从/formdata保存到具有相同名称的状态，同样适用于图标，但在控制台中它只返回undefined undefined，而不是formdata和图标。

我的代码在哪里犯了错误？我该如何解决？

Answer 1

您需要从方法返回Promise对象。截至目前，您没有返回任何内容，因此它隐含undefined。

试试这个：

getFormData () {
    return fetch('/formdata', {
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
    }})
        .then(res => res.json())
}

getIcons () {
    return fetch('/icons', {
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
    }})
        .then(res => res.json())
}

Answer 2

只需添加@dfsq的答案，在返回promises后，您可以更新每个函数中的状态：

constructor(props) {
    super(props);

    this.state = {
      formData = {},
      icons: {}
    }
  }

getFormData () {
    return fetch('/formdata', {
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
    }})
    .then(res => res.json(
        this.setState({ formData: res.json })
    ))
}

getIcons () {
    return fetch('/icons', {
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
    }})
    .then(res => res.json(
        this.setState({ icons: res.json })
    ))
}

ReactJS带有promise的几个获取请求

2 个答案: