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

Question

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

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

我正在使用Axios和Vue，已经为Axios获取请求和获取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 warn]: Error in render: "TypeError: Cannot read property 'nombre' of undefined"