时间戳

首页 > 解决方案 > Axios 返回一个字符串而不是 JSON (vue.js)

api - Axios 返回一个字符串而不是 JSON (vue.js)

问题描述

我不明白为什么，但 axios 返回的是字符串而不是 json。有人可以解释一下为什么吗？

<template>
    <div class="app">
        <Header/>
                <h1>{{services}}</h1>
                <Services v-bind:services="services"></Services>
    </div>
</template>

<script>
    import Header from "./components/Header.vue";
    import Services from "@/components/Service";
    import axios from 'axios';

    export default {
        name: 'App',
        components: {
            Services,
            Header,
        },
        data() {
            return {
                services: [],
            }
        },
        created() {
            const instance = axios.create({
                baseURL: 'http://localhost:3000/api',
                timeout: 1000,
                headers: {'Authorization': 'Bearer ' + 'mysecretcode'}
            });
            instance.get('/service')
                .then(response => {
                    this.services = response.data;
                    console.log(response.data);
                })
                .catch(e => {
                    this.errors.push(e)
                })
        },
    }

</script>

<style>
</style>

我在网上看到 response.data 应该只发回解析后的 json 数据，但在我的 {{services}} 上我得到了这个：

{ "status": 1, "message": "操作成功", "data": [ { "_id": "5edfdaf5586d4c75036bc853", "title": "Logo rapide", "description": "testing service desc", " createdAt": "2020-06-09T18:54:45.904Z" }, { "_id": "5edfdafd586d4c75036bc854", "title": "Logo rapide", "description": "testing service desc", "createdAt": " 2020-06-09T18:54:53.054Z" }, { "_id": "5edfdc8bc07c7677915275c1", "title": "Logo rapide", "description": "testing service desc", "createdAt": "2020-06- 09T19:01:31.945Z" }, { "_id": "5edfdc8cc07c7677915275c2", "title": " Logo rapide", "description": "testing service desc", "createdAt": "2020-06-09T19:01:32.621Z" } ] }

代替解析后的数据。谢谢 :)

标签： apivue.jsaxios

解决方案

如果响应是 astring那么你可以使用：

this.services = JSON.parse(response.data).data

否则，如果它JSON已经是一个对象（我认为它可能是 - 但从你的获取实际数据object）response.data：

this.services = response.data.data

然后你可以使用v-for并获得标题{{service.title}}

希望能帮助到你。

推荐阅读