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

问题描述

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

我已经有了一个字符的 url（即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文件是：

<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"

标签： javascriptvue.jsaxios

解决方案

我正在创建第二个答案，以概述如何使用来做到这一点vue-router，因为您正在询问它。

免责声明：这不是“最干净”的代码 - 此伪代码旨在粗略地说明您的目标。

希望这可以帮助！

CodePen 镜子

const PeopleService = {};
PeopleService.getPeople = async id => {
  try {
    const result = await axios.get(`https://swapi.co/api/people/${id}`);
    const specieRoute = result.data.species[0].split("/");
    const idSpecie = specieRoute[specieRoute.length - 2];
    const especie = await axios.get(`https://swapi.co/api/species/${idSpecie}`);
    const planetRoute = result.data.homeworld.split("/");
    const idPlanet = planetRoute[planetRoute.length - 2];
    const planeta = await axios.get(`https://swapi.co/api/planets/${idPlanet}`);
    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);
  }
};

const peopleComponent = {
  name: 'people',
  template: "#peopleComponent",
  data() {
    return {
      userId: null,
      peopleArray: [],
      peopleObject: null,
      error: null
    };
  },
  mounted() {
    this.userId = this.$route.params.id;
    this.getUser();
  },
  methods: {
    async getUser() {
      try {
        let person = await PeopleService.getPeople(this.userId);
        this.peopleArray.push(person); // add to array
        this.peopleObject = person; // assign to object
      } catch (error) {
        this.error = error.message;
      }
    }
  }
};

const homeComponent = {
  name: 'home',
  template: "#homeComponent",
}

const routes = [
    { path: '', name: 'home', component: homeComponent },
    { path: '/people/:id', name: 'people', component: peopleComponent },
]

const router = new VueRouter({ routes });

new Vue({
    router
}).$mount('#app');

.nav-links {
  background-color: lightgray;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.4/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

<div id="app">
  <div>
    <router-view></router-view>
  </div>
</div>

<script type="text/x-template" id="homeComponent">
  <div>
    <hr/>
    <div class="nav-links">
      <h2>Home</h2>
      <div>
        <router-link :to="{ name: 'people', params: { id: 1 } }">Person 1</router-link>
        <br/>
        <router-link :to="{ name: 'people', params: { id: 2 } }">Person 2</router-link>
      </div>
    </div>
    <hr/><br/>
  </div>
</script>

<script type="text/x-template" id="peopleComponent">
  <div>
    <hr/>
    <div class="nav-links">
      <h2>People</h2>
      <div>
        <router-link :to="{ name: 'home' }">Home</router-link>
      </div>
    </div>
    <hr/><br/>
    <h3>People as ARRAY</h3>
    <div v-if="peopleArray.length > 0">
      <div v-for="(p, index) in peopleArray" :key="index">
        <div><b>nombre:</b> {{ p.nombre }}</div>
        <div><b>altura:</b> {{ p.altura }}</div>
        <div><b>peso:</b> {{ p.peso }}</div>
        <div><b>genero:</b> {{ p.genero }}</div>
        <div><b>piel:</b> {{ p.piel }}</div>
        <div><b>especie:</b> {{ p.especie }}</div>
        <div><b>planeta:</b> {{ p.planeta }}</div>
      </div>
    </div>
    <div v-else>
      <i>Loading People...</i>
    </div>
    <br/>
    <hr/> --- OR ---
    <hr/><br/>
    <h3>People as OBJECT</h3>
    <div v-if="peopleObject != null">
      <div v-for="(p, index) in peopleObject" :key="index">
        {{ p }}
      </div>
    </div>
    <div v-else>
      <i>Loading People...</i>
    </div>
  </div>
</script>

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

问题描述

解决方案

推荐阅读