如何从多个API调用中设置状态？

Question

I am having this issue with setState in the code.

Trying to do

what I wanted to achieve is to concatenate results from all the API calls into one variable in State.Should I assign everything in the first API (as in second or third API call wrap within the first API .then(function) ?) or should i define each api separately

var requestDigAPI = ...
var requestNEWSAPI =...

and call

    this.setstate({
   this.state.articles.concat(dig,buzzfeed)
})

What is the right approach?

ERRORs

No matter the method react logs error. If I set the State in other API within the first API returns

error buzzfeed unidentified

or setState outside of both API

error dig , buzzfeed unidentified

  componentDidMount() { this.setState({loading: true}) var apiRequestDig = fetch("api").then(function(response) { return response.json() }); var apiRequestNews = fetch("api").then(function(response) { return response.json() }) var apiREquestBuzzFeed = fetch(api).then(function(response) { return response.json() }) var combinedData = { "apiRequestDig": {}, "apiRequestNews": {}, "apiREquestBuzzFeed": {} }; Promise.all([apiRequestDig, apiRequestNews, apiREquestBuzzFeed]).then(function(values) { combinedData["apiRequestDig"] = values[0]; combinedData["apiRequestNews"] = values[1]; combinedData["apiREquestBuzzFeed"] = values[2]; return combinedData; }); var dig = apiRequestDig.then(results => { let dig = results.data.feed.map(article => { return { title: article.content.title_alt, image: article.content.media.images[0].url, category: article.content.tags[0].name, count: article.digg_score, description: article.content.description, url: article.content.url } }) apiREquestBuzzFeed.then(results => { console.log(results.big_stories[0].title) let buzzfeed = results.big_stories.map(article => { return { title: article.title, image: article.images.small, category: article.category, count: article.impressions, description: article.description, url: "https://www.buzzfeed.com"+article.canonical_path } }) }) this.setState({ articles: this.state.articles.concat(dig), loading: "none" }) // console.log(this.state); }) } 

thanks for the advice

Answer 1

How about moving state manipulation code within the resolve callback of Promise.all ?

componentDidMount() {
    this.setState({loading: true})
    const apiRequestDig = fetch("api").then(response => response.json());
    const apiRequestNews = fetch("api").then(response => response.json());
    const apiREquestBuzzFeed = fetch("api").then(response => response.json());

    Promise.all([
      apiRequestDig, 
      apiRequestNews, 
      apiREquestBuzzFeed
    ]).then(([dig, news, feed]) => {
      const digs = dig.data.feed.map(article => ({
        title: article.content.title_alt,
        image: article.content.media.images[0].url,
        category: article.content.tags[0].name,
        count: article.digg_score,
        description: article.content.description,
        url: article.content.url
      }));
      const buzzfeed = feed.big_stories.map(article => ({
        title: article.title,
        image: article.images.small,
        category: article.category,
        count: article.impressions,
        description: article.description,
        url: `https://www.buzzfeed.com${article.canonical_path}`
      }));
      this.setState({
        articles: [...this.state.articles, ...digs],
        loading: "none"
      });
      // return anything you want as wrapped with promise
      return {
        apiRequestDig: dig,
        apiRequestNews: news,
        apiREquestBuzzFeed: feed
      };
    });
    .catch(e => {
      // catch your error here
    })
}

Answer 2

You could chain your API calls, but Promise.all() allows you to make concurrent calls, so why not use it?

However, I think your API functions should be defined outside of componentDidMount , for more readability and reusability:

/* Outside of your component */
const apiRequest = url => fetch(url).then(response => response.json())

const apiRequestDig = () => {
    return apiRequest("https://dig/api/url").then(results => {
        return results.data.feed.map(article => {
            return {
                title: article.content.title_alt
                /* ... */
            };
        });
    });
};

const apiRequestNews = () => {
    return apiRequest("https://news/api/url").then(results => {
        return results.big_stories.map(article => {
            return {
                title: article.title
                /* ... */
            };
        });
    });
};

const apiRequestBuzzFeed = () => {
    return apiRequest("https://buzzfeed/api/url").then(results => {
        return results.big_stories.map(article => {
            return {
                title: article.title
                /* ... */
            };
        });
    });
};

/* Inside your component */
componentDidMount() {
    this.setState({loading: true});

    Promise.all([
        apiRequestDig(),
        apiRequestNews(),
        apiRequestBuzzFeed()
    ]).then(values => {
        return values[0].concat(values[1], values[2]);
    }).then(results => {
        this.setState({
            articles: this.state.articles.concat(results),
            loading: "none"
        });
    }).catch(err => {
        console.log('Oops, something went wrong', err);
    });
}

Answer 3

Using Promise.all will be the best approach.But keep in mind about the fail fast behavior of Promise.all where in if one request fails then Promise.all will reject immediately MDN Link . This behavior can be mitigated by catching the error and resolving with empty data.

 function makeAPICall(postId) { return fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`).then(res => res.json()); } var Posts = React.createClass({ getInitialState: function() { return {}; }, componentDidMount: function() { var requestsArray = [makeAPICall(1), makeAPICall(2), makeAPICall(3)]; Promise.all(requestsArray).then(values => { var postTitles = values.map(post => post.title).join(", "); this.setState({ data: postTitles }); }).catch(console.error.bind(console)); }, render: function() { return <div>{this.state.data}</div>; } }); ReactDOM.render( <Posts/>, document.getElementById('root') ); 

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>