Как последовательно выполнять запросы?

Question

[mag1st3r]

Делаю запрос на сервер через map с разными urls, потом полученные данные я устанавливаю в State и использую для вывода. Хочу чтобы запросы были последовательные, но иногда они срабатывают неправильно и получаются баги. Как правильно прописать код для нормального получения данных?

const urlList = ["countries", "states", "cities", "users"];
componentDidMount() {
         urlList.map( (url, index) => {
            return servicesAPI.getResourse(url).then( (body) => {
                index !== 3 ?  this.setState({
                                 dataAPI : [...this.state.dataAPI, body] }) :
                                this.setState({
                                    dataAPI : [...this.state.dataAPI, body],
                                    loaded: true
                                })

            })
        })
export default  class ServicesAPI {
    _apiBase = `http://localhost:3001/`;


    async getResourse(url) {
        const res = await fetch(`${this._apiBase}${url}`);

        if (!res.ok) {
            throw new Error(`Could not fetch ${url}` +
                `, received ${res.status}`)
        }
        return await res.json();
    }

Answer 1

[0xD34F]

this.setState({

Даже думать не хочу, возможна ли такая ситуация, когда сразу после вызова setState для результата одного запроса начинает обрабатываться другой. Не будем рисковать потерей результатов и используем функциональное обновление. Ну и если хотите последовательные запросы, тогда надо ждать конца предыдущего, чтобы сделать следующий, async/await позволит код упростить.

async componentDidMount() {
  for (const url of urlList) {
    const
      dataAPI = [ ...this.state.dataAPI, await servicesAPI.getResourse(url) ],
      loaded = dataAPI.length === urlList.length;

    await new Promise(r => this.setState({ dataAPI, loaded }, r));
  }
}

Comments

[mag1st3r]

Получилось, все норм спасибо, а почему мой код не работал?

Answer 2

[Владимир]

https://habr.com/ru/post/337030/