javascript - 在 React 组件中显示并行 Ajax 请求的结果

Question

我正在尝试用 Reactjs 重写我的旧项目。由于我是初学者，这是我的第一个应用程序，因此我需要一些帮助来了解以 React 方式执行此操作的最佳方法是什么，以及如何改进自己和这个演示项目。

这是一个working demo其中。

我想在 Ajax 请求完成后立即显示名称，而不是在 Promise 中等待所有请求完成。

ListManager.js

import React, { Component } from 'react'
import List from './List'

export class ListManager extends Component {
  constructor (props, context) {
    super(props, context)
    this.state = {finaldata: []}
  }

  componentWillMount () {
    const id = [1, 2, 3, 4, 5]
    this.APIres(id)
  }

  APIres (ids) {
    Promise.all(ids.map(id => fetch('http://api.tvmaze.com/shows/' + id).then(resp => resp.json().then(data => data.name))
    )).then(data => {
      data.sort()
      this.setState({finaldata: Object.assign(this.state.finaldata, data)})
    })
  }

  render () {
    return (
      < div>
        <h3>{this.props.title}< /h3>
        <List data={this.state.finaldata} />
      < /div >
    )
  }
}

List.js

'use strict'
import React, { Component } from 'react'

const ListItem = ({ text }) => <li>{text}</li>

const List = ({ data }) => {
  const listNodes = data.map((value, index) => <ListItem text={value} key={index}></ListItem>)

  return <ul>{listNodes}</ul>
}
export default List

一些注意事项:id 数组将附带一个 URL 查询，例如 example.com/#/?id=1,2,3,4。我将为此使用react-router。

Answer 1

有办法

1 个序列 DEMO

所有提取同时开始(出于性能原因)，但数据将按 ID 的顺序显示

  APIres (ids) {
    ids.map(id => fetch('http://api.tvmaze.com/shows/' + id).then(resp => resp.json()) )
    .reduce((sequence,promise)=>
    sequence.then(()=>promise)
    .then(({name})=>{
        this.setState({finaldata: [...this.state.finaldata, name]});
    }), Promise.resolve());
  }

不保证 2 个序列 DEMO

所有提取同时开始(出于性能原因)，但数据将按照请求响应的顺序出现，这可能与 ids 顺序不同

  APIres (ids) {
    ids.forEach(id => fetch('http://api.tvmaze.com/shows/' + id).then(resp => resp.json())
     .then(({name})=>{
      this.setState({finaldata: [...this.state.finaldata, name]})
    }))
  }

3 setState之前排序

数据会按照请求响应的顺序出现，但排序是通过sort()实现的

  APIres (ids) {
    ids.forEach(id => fetch('http://api.tvmaze.com/shows/' + id).then(resp => resp.json())
     .then(({name})=>{
      this.setState({finaldata: [...this.state.finaldata, name].sort()})
    }))
  }