JSON.parse解析json出错的替代方案

我们有时候需要将json字符串转为json对象,我们通常用eval或new Function或JSON.parse或parseJSON或这四种方案都可以达到目标,如下所示:

// JSON字符串:
const str = '{ "name": "xiaoming", "sex": "man" }'; 

// JSON对象:
const obj = {
    
     "name": "xiaoming", "sex": "man" };

//要使用上面的str,必须使用下面的方法先转化为JSON对象:
// 由JSON字符串转换为JSON对象
const obj1 = eval('(' + str + ')');
或者
const obj1 = (new Function("return " + str))();; 
或者
const obj1 = str.parseJSON(); 
或者
const obj1 = JSON.parse(str); 

如果我们做web端项目,上面的方法都没问题,由于JSON.parse无法识别某些url或者消息内容中的特殊字符,所以特别容易报错,在JSON.stringify()之后将变量使用encodeURIComponent函数处理,encodeURIComponent()
函数可把字符串作为 URI 组件进行编码。在目标页面接收时用decodeURIComponent对URI
组件进行解码,后通过JSON.parse()将变量还原。如下所示,请求拿到后端数据后需要将其缓存到本地,这里有个坑就是 wx.setStorageSync和wx.setStorage单个key存储的数据最大1mb,如果你拿到后端的数据大于1mb,你直接存本地就会导致真机上报错,而微信开发者工具上可能不会报错,所以你看到了我这里用了try catch , 除此之外,我还把数据通过路由wx.reLaunch携带传递给下一页

              
                    let obj = res.data.result[0]
                    wx.setStorageSync('oldFormDetailTitle', obj.title)

                    //wx.setStorageSync单个key最大存储为1MB
                    try {
    
    
                      wx.setStorageSync('oldFormJson', obj.formJson)
                    } catch (e) {
    
    }
                    
                    wx.setStorageSync('taskItemResultId', obj.taskItemResultId)
                    wx.reLaunch({
    
    
                      url:
                        '/pages/check/check_detail_old?oldFormJson=' +
                        encodeURIComponent(JSON.stringify(obj.formJson)),
                    })
                  

,如果是我们做微信小程序那就不能用上面的方法来进行字符串解析,用了也可能会报各种错,基于安全考虑,小程序中不支持动态执行 JS 代码,如下官网所述:
在这里插入图片描述
那这个时候我们就需要自定义一种方法去解析字符串:

//util.js

//关于JSON.parse解析报错处理方案
function strToJson(jsonStr) {
    
    
  let obj = {
    
    }
  if (
    jsonStr &&
    Object.prototype.toString.call(jsonStr) == '[object String]' &&
    jsonStr != 'null'
  ) {
    
    
    jsonStr = jsonStr.replace(/\r/g, '\\r')
    jsonStr = jsonStr.replace(/\n/g, '\\n')
    jsonStr = jsonStr.replace(/\t/g, '\\t')
    jsonStr = jsonStr.replace(/\\/g, '\\\\')
    jsonStr = jsonStr.replace(/\'/g, ''')
    jsonStr = jsonStr.replace(/ /g, ' ')
    jsonStr = jsonStr.replace(/</g, '$lt;')
    jsonStr = jsonStr.replace(/>/g, '$gt;')
    obj = JSON.parse(jsonStr)
  }
  return obj
}

module.exports = {
    
    
  strToJson,
}

然后使用的话需要先引入这个util.js

//my.js
var util = require('../../utils/util.js')

接着刚刚的业务需求,我们在上级页面通过路由传递过来,在新页面需要在onload里接收处理得到的数据,如下图:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_37635012/article/details/131184118