JSON数据格式转换

在前端 Vue 3 中，处理 JSON 数据通常涉及到从 API 获取 JSON、解析 JSON 数据、或者将 JavaScript 对象转换为 JSON 字符串。这里是几种常见的 JSON 转换操作

一、从 JSON 字符串解析为 JavaScript 对象

如果你从 API 或其他地方收到一个 JSON 字符串，可以使用 JSON.parse() 来将它转换为 JavaScript 对象。

let jsonString = '{"name": "John", "age": 30, "city": "New York"}';
let jsonObject = JSON.parse(jsonString);

console.log(jsonObject.name);  // 输出: John

二、将 JavaScript 对象转换为 JSON 字符串

let user = {
  name: "Alice",
  age: 25,
  city: "London"
};

let jsonString = JSON.stringify(user);

console.log(jsonString);
// 输出: {"name":"Alice","age":25,"city":"London"}

三、 在 Vue 3 中处理 JSON 数据

a. 获取 JSON 数据并解析

通常，前端会通过 API 请求（如 fetch 或 axios）获取 JSON 数据。在 Vue 3 中，你可以使用 onMounted 钩子来发送请求并处理返回的 JSON 数据。

<template>
  <div>
    <h1>User Info</h1>
    <p v-if="user">Name: {{ user.name }}</p>
    <p v-if="user">Age: {{ user.age }}</p>
    <p v-if="user">City: {{ user.city }}</p>
  </div>
</template>

<script>
  import { ref, onMounted } from 'vue';

  export default {
    setup() {
      const user = ref(null);

      // 获取数据
      onMounted(async () => {
        try {
          const response = await fetch('https://api.example.com/user');
          const data = await response.json();  // 解析为 JSON 对象
          user.value = data;  // 将 JSON 对象存储到响应式变量
        } catch (error) {
          console.error("Error fetching data:", error);
        }
      });

      return {
        user
      };
    }
  };
</script>

在上面的代码中：

• 使用 fetch 获取 JSON 数据。
• 使用 response.json() 解析返回的 JSON 字符串。
• 通过响应式变量 user 在模板中显示数据。

b. 发送 JavaScript 对象作为 JSON

当你需要将 JavaScript 对象作为 JSON 发送到后端时，可以使用 fetch 或 axios，并将数据通过 JSON.stringify() 转换成字符串。

<template>
  <div>
    <button @click="sendData">提交数据</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const sendData = async () => {
      const data = {
        name: 'Tom',
        age: 28,
        city: 'Berlin'
      };

      try {
        const response = await fetch('https://api.example.com/user', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(data)  // 将对象转换为 JSON 字符串
        });
        
        const result = await response.json();
        console.log(result);  // 返回结果
      } catch (error) {
        console.error('Error:', error);
      }
    };

    return {
      sendData
    };
  }
};
</script>

在这段代码中：

• 使用 JSON.stringify(data) 将 JavaScript 对象转换为 JSON 字符串，并通过 fetch 的 body 发送。
• 设置 Content-Type: application/json 以告知服务器这是 JSON 格式的数据。

c. 使用 Axios 发送和接收 JSON

axios 是一个流行的 HTTP 客户端库，处理 JSON 数据也非常方便。默认情况下，axios 会自动将响应数据解析为 JSON 对象。

<template>
  <div>
    <button @click="sendData">提交数据</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const sendData = async () => {
      const data = {
        name: 'Tom',
        age: 28,
        city: 'Berlin'
      };

      try {
        const response = await axios.post('https://api.example.com/user', data);  // 直接传递对象，axios会自动转换为 JSON
        console.log(response.data);  // 返回的 JSON 数据
      } catch (error) {
        console.error('Error:', error);
      }
    };

    return {
      sendData
    };
  }
};
</script>