在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陣列將像example.com/#/?id=1,2,3,4 URL查詢。我將爲此使用react-router。

Answer 1

有辦法

1 sequenseDEMO

都取在同一時間開始（爲了性能的原因），但數據將出現在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

所有取在同一時間（對於性能原因）開始，但數據將出現在的請求的響應命令，這可能不是相同的ID命令

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