网站建设与维护基础知识百度小程序制作流程

可以看到，前端响应参数是没有丢失精度的

 但是在接受 axios 请求参数时出现了精度丢失

解决方案一：改变 axios 字符编码

axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8';

 未解决

解决方案二：手动使用 json.parse() 方法还原响应数据

axios.defaults.transformResponse = [];
const articles = ref(null);function safeJsonParse(jsonStr) {const regex = /"(\w+)":([^,}]+)/g;let match;let result = '';let index = 0;while ((match = regex.exec(jsonStr))!== null) {const key = match[1];let value = match[2];if (key === 'id' && /^\d+$/.test(value)) {const numValue = Number(value);if (numValue > Number.MAX_SAFE_INTEGER) {value = `"${value}"`;}}result += jsonStr.slice(index, match.index) + `"${key}":${value}`;index = regex.lastIndex;}result += jsonStr.slice(index);return JSON.parse(result);
}const getPostArticles = async () => {const res = await axios({method: 'post',url: '/articles',data: {page: 1,pageSize: 10}});const parsedData = safeJsonParse(res.data); // 手动解析响应数据console.log('手动解析后的原始响应数据:', parsedData);articles.value = parsedData.data;console.log('articles数组为',articles);
};

成功拿到一整个响应的对象，数据没有丢失

但是引发了新的问题，在跳转到文章详情页面后，文章详情发送请求成功却没有正确赋值

找到错误点，整个项目是用的同一个 axios 实例对象，当这个对象开启手动处理响应的 json 参数后，每一个 axios 请求都需要手动处理了

解决方案，请求的 axios 独立出来，选择使用新创建的 axios 实例来发送异步请求 

import axios from 'axios';// 创建自定义的 axios 实例
const customAxios = axios.create({baseURL: 'http://localhost:8888',timeout: 5000
});
//开启自定义处理响应
customAxios.defaults.transformResponse = [];// 获取文章列表的函数
const getPostArticles = async () => {try {const res = await customAxios.post('/articles', {page: 1,pageSize: 10});const parsedData = safeJsonParse(res.data);console.log('手动解析后的原始响应数据:', parsedData);articles.value = parsedData.data;console.log('articles 数组为', articles);} catch (error) {console.error('获取文章列表失败:', error);}
};

这个 axios 实例只为这一个页面服务