Как сделать одновременно несколько запросов в Vue+Axios?

Question

[kirillsnovikov]

Здравствуйте!
Подскажите, возможно ли сделать параллельно несколько запросов в одном компоненте Vue?
Предполагаю, что можно, но на сколько это хороший подход или все же лучше делать каждый запрос в отдельном компоненте?
Код из данного примера не помог.
Благодарю за помощь!

Comments

[Павел Корнилов]

В 99.9% случаев такого не нужно. Лучше сменить архитектуру и поместить все исходящие данные в единый запрос.

[Roman K]

Павел Корнилов, да что ты говоришь

[Павел Корнилов]

Roman Kitaev, именно то, что сказал. Если есть необходимость в многократных клиент-серверных запросах при рендеринге одной страницы - значит программисты не доработали.

[kirillsnovikov]

Павел Корнилов,
в данном случае один запрос к стороннему API, второй к своему приложению
можно конечно и это разбить, но хотелось бы их в один компонент поместить

[Павел Корнилов]

kirillsnovikov, а, если один из запросов к чужому серверу, тогда понятно.
Впрочем, Антон Антон дал хорошее и чистое решение.

Answer 1

[Антон Антон]

Promise.all([
  axios.get('/user/12345'),
  axios.get('/user/12345/permissions')
]).then(([
  user,
  permissions
]) => {
  console.log(user, permissions);
  ///
});

Comments

[kirillsnovikov]

Спасибо, ваш вариант рабочий!
почему эта конструкция не хочет работать не пойму?

<script>
  export default {
    data: () => ({
      users: null,
      posts: null
    }),
    mounted() {
      axios.all([
        axios.get('/api/users'),
        axios.get('/api/posts')
      ]).then(axios.spread(([
        users,
        posts
      ]) => {
        console.log(users.data, posts.data),
        this.users = users.data,
        this.posts = posts.data
        ///
      }));
    }
  }
</script>

причем, в консоли все ок, видимо где-то в блоке axion.spread ошибка, как записать эти данные в переменные?

[Антон Антон]

kirillsnovikov, не пользоваться функциями axios, а пользоваться нативными не предлагать? Вообще чисто визуально косяк в том, что результат axios.spread подается в качестве входного параметра (первый параметр then() - функция, которая будет выполнена при исполнении промиса)

Answer 2

[Андрей Охотников]

Несколько одновременных запросов можно сделать при помощи axios.all

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

Comments

[Roman K]

А у этого есть преимущества перед Promise.all?

[Андрей Охотников]

Roman Kitaev, сама библиотека axios основана на промисах, под капотом она как раз использует promise.all, преимущество в удобстве работы с axios