Несколько топоров ios запросов в Vue - PullRequest
Новая
       7

Несколько топоров ios запросов в Vue

0 голосов
/ 04 апреля 2020

У меня есть две разные json конечные точки, которые я использую в приложении Vue JS. В настоящее время я отображаю сообщения в домашнем виде. Затем с помощью маршрутизатора Vue я создаю подробное представление с более подробной c информацией о публикации. Я хотел бы, чтобы комментарии отображались с конечной точки /comments и отображались в подробном представлении, если идентификатор комментария совпадает с идентификатором записи.

posts /posts

comments /comments

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com/'
})
const basePost = '/posts'
const baseComments = '/comments'

export default {
  fetchPosts () {
    return instance
      .get(basePost)
      .then(response => response.data)
  }
}

Как объединить оба массива в один, а затем установить его для получения сообщений и комментариев в представлении?

1 Ответ

2 голосов
/ 04 апреля 2020

Так как axios get возвращает promise, то есть вы можете вызвать обе параллели и получить обещания для разрешения, используя Promise.all.

Пример 1: Использование Promise.all

//const axios = require("axios");
const instance = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/",
});
const basePost = "/posts";
const baseComments = "/comments";
const service = {
  fetchPosts() {
    const promises = [instance.get(basePost), instance.get(baseComments)];
    return Promise.all(promises).then(([posts, comments]) => [
      posts.data,
      comments.data,
    ]);
  },
};
service.fetchPosts().then(console.log);
// export default service;
.as-console-row {
  color: blue !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script>

Примечание: Если вы хотите, чтобы series имел в виду сначала сообщение, то комментируйте, вы можете использовать async-await.

Пример 2: Использование async-await

//const axios = require("axios");
const instance = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/",
});
const basePost = "/posts";
const baseComments = "/comments";
const service = {
  async fetchPosts() {
    const posts = await instance.get(basePost).then((x) => x.data);
    const comments = await instance.get(baseComments).then((x) => x.data);
    //console.log(posts, comments);
    return [posts, comments];
  },
};
// export default service;

service.fetchPosts().then(console.log);
.as-console-row {
  color: blue !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script>
...