javascript - ReactJS 几个有 promise 的获取请求

Question

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

本质上，我需要两个获取请求，并且我想将这些请求的结果保存为 2 个不同的状态。

这是我目前拥有的:

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，而不是表单数据和图标。

我的代码哪里出错了？我该如何解决？

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