多个 axios 请求进入 Vue

Question

我在 Vue JS 应用程序中使用了两个不同的 json 端点。目前我在主页视图中显示帖子。然后使用 Vue 路由器，我正在创建一个包含更具体帖子信息的详细信息视图。如果评论 ID 与帖子 ID 匹配，我希望 cmets 从端点 /comments 显示在详细信息视图中。

帖子/posts

cmets/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)
  }
}

如何将两个数组连接成一个，然后将其设置为在视图中检索帖子和 cmets？

Answer 1

由于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>