Scenes
We in the development process, because the data will always encounter reasons, resulting in an array using the method or to obtain object properties when an error.
xxx is not fuction
Cannot read property xxxx of undefined
Because of these errors, it will lead directly to the page does not open, so we usually do some fault-tolerant processing, so that the page can be opened normally. For example: &&, ternary operator, even if sometimes see the statement to handle.
Common way
. 1 // Response data from the interface 2 const Response = { . 3 code: 200 is , . 4 MSG: 'Message' , . 5 Data: { . 6 Total: 100 , . 7 Page:. 1 , . 8 the pageSize: 10 , . 9 Content: [] 10 } . 11 } 12 is 13 is const goodsList response.data.content.forEach = (() => {}) 14 const = Total response.data.total
In order to guarantee this data, content properties and not being given the forEach, may do so
1 const goodsList = response.data && response.data.content && response.data.content.forEach(() => {}) 2 const total = response.data && response.data.total
This completed the initial data fault tolerance, redundancy but the code is too poor readability, and the total value will likely become a Boolean type.
Simple improvements
Only two simple processing, is a deconstruction, a default value is to
1 const { data = {} } = response 2 const { constent = [], total = [] } = data 3 goodsList.forEach(() => {})
Deconstruction is necessary to increase the readability of the code data and the flat
But, but here there are new problems. This time if I get the data look like this:
1 const response = { 2 data: null 3 }
Then deconstruct the error will not destructure Property of Can content of 'undefined' or 'null'
The default value of the entry into force of the conditions is that object's property value exactly equal undefined
In the above code, attribute data is equal to null, null and undefined because not strictly equal, it is a valid assignment, leading to a default value {} will not take effect. Actually it became like the following:
1 const { constent = [], total = [] } = null
So we have got to ensure that data can not exist null, otherwise the above code no sense.
Further improvement
You might want to back-end and agreed it really like to return null
But not over-confident external data, including the Conventions after
In fact, in this case the package can axios or when the fetch, in which a filtering function is added, to get data from the interface at the filter, to filter out data value is null, or is null data is to reassign undefined .
The following are data filter function
1 // The acquired data was filtered over 2 const = replaceNull (obj) => { . 3 for (the let Key in obj) { . 4 Switch (Object.prototype.toString.call (obj [Key]). Slice (. 8, -1 )) { . 5 Case 'Object' : . 6 replaceNull (obj [Key]) . 7 BREAK ; . 8 Case 'the Array' : . 9 for (the let I = 0; I <obj [Key] .length; I ++ ) { 10 replaceNull (obj [Key] [I]) . 11 } 12 is BREAK ; 13 default: 14 if (obj[key] === null) obj[key] = undefined; 15 } 16 } 17 }
After filtration, this time to such an approach, no problem
1 const { data = {} } = response 2 const { constent = [], total = [] } = data 3 goodsList.forEach(() => {})
Of course, if you have a node as an intermediate layer, layer is a front end view of deconstruction can safely use the default values, such that graphQl.
Conclusion
Front-end fault tolerant data processing is required, can not be expected format of the external data is what you want. I usually do not know how to deal with.