WeChat applet JSON.parse() and JSON.stringify(), wx.request and wx.uploadFile

The role of JSON.parse() and JSON.stringify()

To summarize briefly:

1. JSON.parse() converts the JSON string into a JavaScript object
2. JSON.stringify() converts JavaScript objects into JSON strings

They are inverse effects: JSON.parse() can convert JSON string A into JavaScript object B; JSON.stringify() can convert JavaScript object B into JSON string A.

Connection with wx.request, wx.uploadFile

We found that in the description of wx.request in the document, the following is worth noting:

that is, if the value returned by calling wx.request is a JSON string, a JSON.parse() will be performed on the data, then this The JSON string becomes a JavaScript object.
However, there is no relevant description in wx.uploadFile.

Development requirement description

When developing a function of the WeChat applet project, I need to use wx.request and wx.uploadFile to upload data respectively, and give users relevant prompts based on the res.data.error_code returned by the background database. For example, if error_code is 0, it means "submission is successful", and if error_code is 1, it means "submission failed."

bug description

I wrote the code and uploaded the corresponding data. There is no problem with the url and so on. The same is uploading data, but uploadFile cannot return me the normal error_code, and the printed res.data.error_code is 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: '上传失败',
          })
        }
      })

If the error_code is all undefined, the judgment below will naturally be difficult, and the proper showToast will not appear, and the user will not get the corresponding prompt.

Cause Analysis

wx.uploadFile does not perform JSON.parse() processing on the JSON string, so the res.data passed from the background is actually a JSON string, not a JavaScript object, so there is no res.data.error_code at all. It is not a JavaScript object, how can there be a'.' operation?
However, wx.request converts JSON strings into JSON.parse() and converts them into JavaScript objects , so you can directly access res.data.error_code, and there is no problem at all.

//同样的代码，在wx.request就没有问题；
        success: function (res) {
    
    
          console.log(res.data)
          if (res.data.error_code == 0) {
    
    
            wx.showToast({
    
    
              title: '提交成功',
            })
          }

solution

In wx.uploadFile, add var data = JSON.parse(res.data), convert res.data into JavaScript object and save it in variable data. So you can access 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: '提交成功',
            })
          }

Solve the problem perfectly.