Axios返回字符串而不是JSON(vue.js)

e5nszbig  于 2023-10-18  发布在  iOS
关注(0)|答案(4)|浏览(236)

我不明白为什么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”:“操作成功”、“数据”:[ {“_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”} ] }
而不是解析的数据。感谢您的评分

yuvru6vn

yuvru6vn1#

如果响应是string,则可以使用用途:
this.services = JSON.parse(response.data).data
否则,如果它已经是一个JSON对象(我认为它可能是-但从response.data获取实际数据object):
this.services = response.data.data
然后您可以使用v-for并使用{{service.title}}获取标题
希望有帮助。

nue99wik

nue99wik2#

JSON中可能有错误。Axios在无法将数据解析为JSON时返回字符串。JSON中的常见错误是参数名中缺少引号。比较:JS:{x:“y”} JSON:{“x”:“y”}

k2arahey

k2arahey3#

这与服务器端的无效JSON有关。您可以使用https://jsonlint.com/等在线JSON验证器来验证JSON响应。

bq8i3lrv

bq8i3lrv4#

你可以使用interceptior来修复这个bug

const client = new Axios({});

  // Fix typeof data === 'string' in axios
  client.interceptors.response.use(
    function (response) {
      try {
        if (typeof response.data === 'string') {
          response.data = JSON.parse(response.data);
        }
      } catch {
        /* empty */
      }

      return response;
    },
    function (error) {
      return Promise.reject(error);
    },
  );

相关问题