在前端 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>
