如何使用axios和javascript为单个元素传递url的id值

Question

我正在使用swapi（https://swapi.co/），AXios和VUE显示角色的数据参数（名称，高度，质量......）。

我已经有了一个字符的url（即http://localhost:8081/person/1），我希望它与swapi API（https://swapi.co/api/people/1/）匹配，但我不知道我的错误在哪里

我正在使用Axios和Vue，我已经为Axios get请求和在我的vue文件中获取信息的方法提供了服务。

我的“people.service.js”服务的代码是这样的：

import axios from "axios";

const PeopleService = {};

// PeoplesService.getPeoples = async () => {}; - Para sacar el listado de planetas con un v-for

PeopleService.getPeople = async id => {
  try {
    const result = await axios.get(`people/${id}`);

    // For getting the species

    const specieRoute = result.data.species[0].split("/");
    const idSpecie = specieRoute[specieRoute.length - 2];
    const especie = await axios.get(`species/${idSpecie}`);

    // For getting the planets

    const planetRoute = result.data.homeworld.split("/");
    const idPlanet = planetRoute[planetRoute.length - 2];
    const planeta = await axios.get(`planets/${idPlanet}`);

    // console logs to show results

    console.log(result.data);
    console.log(idSpecie);
    console.log(especie.data);
    console.log(planeta.data);

    // data information

    const people = {
      nombre: result.data.name,
      altura: result.data.height,
      peso: result.data.mass,
      genero: result.data.gender,
      piel: result.data.skin_color,
      especie: especie.data.name, // Lo saco del servicio de especies
      planeta: planeta.data.name // Lo saco del servicio de planetas
    };

    return people;
  } catch (error) {
    const errorStatus = error.response.status;
    let errorMessage = "";

    if (errorStatus === 404) {
      errorMessage = "No se encontró al personaje";
    } else {
      errorMessage = "Ocurrió un error";
    }

    throw new Error(errorMessage);
  }
};

export default PeopleService;

我的vue文件是：

<template>
  <div>

    The id is {{ $route.params.id }}, and the name is {{ people.nombre }}

  </div>
</template>

<script>
import PeopleService from "@/services/people.service";

export default {
  async create() {
    this.userId = this.$route.params.id;
    this.getUser();
  },

  data() {
    return {
      user: null,
      loading: false,
      error: null,
      userId: this.$route.params.id
    };
  },
  methods: {
    async getUser() {
      try {
        this.loading = true;
        this.people = null;
        this.error = null;
        this.people = await PeopleService.getPeople(this.userId);
      } catch (error) {
        this.error = error.message;
      } finally {
        this.userId = null;
        this.loading = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped></style>

我希望结果是角色的名字，但我得到"[Vue warn]: Error in render: "TypeError: Cannot read property 'nombre' of undefined"

Answer 1

另一答案