JSON.parse()和JSON.stringify(),wx.request和wx.uploadFile
JSON.parse()和JSON.stringify()的作用
简单概括一下:
- JSON.parse()将JSON字符串转为一个JavaScript对象
- JSON.stringify()将JavaScript对象转换为JSON字符串
他们是逆作用:JSON.parse()可以把JSON字符串A转为JavaScript对象B;JSON.stringify()可以把JavaScript对象B转换为JSON字符串A。
与wx.request,wx.uploadFile的联系
我们发现,在文档对wx.request的描述中,有以下值得注意的:
也就是说,若调用wx.request返回的值为JSON字符串,会对此数据进行一次JSON.parse(),那么这个JSON字符串就变成了JavaScript对象了。
但是,在wx.uploadFile中却没有相关的描述。
开发需求描述
在进行微信小程序项目的一个功能开发时,我需要使用wx.request和wx.uploadFile分别进行数据的上传,并根据后台数据库返回的res.data.error_code给用户相关的提示。举个例子,error_code为0,则是“提交成功”,error_code为1,则是“提交失败”。
bug异常描述
写好了代码,将相应的数据进行上传,url等等都没有问题,同样是上传数据,uploadFile却不能给我返回正常的error_code,打印出来的res.data.error_code是undefined。
success(res) {
console.log(res.data)
console.log(res.data.error_code)
if (data.error_code == 0) {
wx.showToast({
title: '提交成功',
})
}
if (data.error_code == 1) {
wx.showToast({
title: '参数不足',
})
}
if (data.error_code == 2) {
wx.showToast({
title: '提交超时',
})
}
if (data.error_code == 3) {
wx.showToast({
title: '不可重复提交',
})
}
},
fail: function (res) {
wx.showToast({
icon: 'none',
title: '上传失败',
})
}
})
若error_code都是undefined,自然在下面的判断就不好使了,没法出现应有的showToast,用户得不到相应的提示。
原因分析
wx.uploadFile没有对JSON字符串做JSON.parse()处理,所以后台传过来的res.data实际上是个JSON字符串,并不是JavaScript对象,所以根本没有res.data.error_code。不是JavaScript对象,怎么有’.'操作呢。
然而,wx.request就有对JSON字符串做JSON.parse()转化,转成了JavaScript对象,所以就可以直接访问res.data.error_code,是一点问题都没有的。
//同样的代码,在wx.request就没有问题;
success: function (res) {
console.log(res.data)
if (res.data.error_code == 0) {
wx.showToast({
title: '提交成功',
})
}
解决方案
在wx.uploadFile中,添加var data = JSON.parse(res.data),将res.data转换成了JavaScript对象保存在变量data中。故可以访问data.error_code。
// 在wx.uploadFile中
success(res) {
var data = JSON.parse(res.data)
console.log(data)
console.log(data.error_code)
if (data.error_code == 0) {
wx.showToast({
title: '提交成功',
})
}
完美解决问题。