axious与原生态ajax返回数据的格式

￡神魔★判官ぃ 2022-05-17 00:08 174阅读 0赞

最近用到了vue，当然也用到了vue中提供的发送ajax请求的函数axious,然后遇到了bug，具体代码如下.  
因为的controller拿到数据是将数据统一方到一个返回对象ApiResult里，下面的方法，返回的是一个集合  
于是在controller中将数据封装到了对象里，即apiResult.setData(list);但是问题出现了，利用原生态的ajax可以获得数据app.options=result.data();。但是利用axios能获得数据，但是用result点不出方法属性。

axious

axios.get(this.api.address).then(function (result) {
                     app.addressList=result.data.data; // 正确的取法
                    app.addressList=result.data;
    
                    console.log(app.addressList);
                });

ajax请求

$.ajax({
                    type:"get",
                    url:this.api.address,
                    dateType:"json",
                    contentType:'application/json',
                    success:function(result){ 
                        app.addressList=result.data;
                        app.options=result.data();
                      console.log(result);
                    }
                });

后来查看了返回结果的数据格式  
原生态ajax:大家可以看到，我result.data直接就得到了我在controller里封装到apiResult的集合list（数据以”\[“开始和结束”\]”）. 即这里通过result.data得到的就是我的list集合

[ { "childList": [ { "childList": null, "data": { "addressName": "小沛县", "id": 8, "parentId": 1 }, "nodeId": 8, "nodeName": "小沛县", "parentId": 1 }, { "childList": [ { "childList": null, "data": { "addressName": "小沛", "id": 13, "parentId": 9 }, "nodeId": 13, "nodeName": "小沛", "parentId": 9 }, { "childList": null, "data": { "addressName": "德阳县", "id": 14, "parentId": 9 }, "nodeId": 14, "nodeName": "德阳县", "parentId": 9 } ], "data": { "addressName": "零陵郡", "id": 9, "parentId": 1 }, "nodeId": 9, "nodeName": "零陵郡", "parentId": 1 }, { "childList": [ { "childList": null, "data": { "addressName": "北陵镇", "id": 15, "parentId": 10 }, "nodeId": 15, "nodeName": "北陵镇", "parentId": 10 } ], "data": { "addressName": "江夏郡", "id": 10, "parentId": 1 }, "nodeId": 10, "nodeName": "江夏郡", "parentId": 1 }, { "childList": [ { "childList": null, "data": { "addressName": "盱眙县", "id": 16, "parentId": 11 }, "nodeId": 16, "nodeName": "盱眙县", "parentId": 11 } ], "data": { "addressName": "南郡", "id": 11, "parentId": 1 }, "nodeId": 11, "nodeName": "南郡", "parentId": 1 }, { "childList": [ { "childList": null, "data": { "addressName": "吴泽乡", "id": 17, "parentId": 12 }, "nodeId": 17, "nodeName": "吴泽乡", "parentId": 12 } ], "data": { "addressName": "武陵郡", "id": 12, "parentId": 1 }, "nodeId": 12, "nodeName": "武陵郡", "parentId": 1 } ], "data": { "addressName": "荆州", "id": 1, "parentId": 0 }, "nodeId": 1, "nodeName": "荆州", "parentId": 0 }, { "childList": [ { "childList": null, "data": { "addressName": "长山郡", "id": 18, "parentId": 2 }, "nodeId": 18, "nodeName": "长山郡", "parentId": 2 }, { "childList": null, "data": { "addressName": "长沙郡", "id": 19, "parentId": 2 }, "nodeId": 19, "nodeName": "长沙郡", "parentId": 2 } ], "data": { "addressName": "姑苏", "id": 2, "parentId": 0 }, "nodeId": 2, "nodeName": "姑苏", "parentId": 0 }, { "childList": [ { "childList": null, "data": { "addressName": "蜀郡", "id": 20, "parentId": 3 }, "nodeId": 20, "nodeName": "蜀郡", "parentId": 3 } ], "data": { "addressName": "常山", "id": 3, "parentId": 0 }, "nodeId": 3, "nodeName": "常山", "parentId": 0 }, { "childList": null, "data": { "addressName": "汴梁", "id": 4, "parentId": 0 }, "nodeId": 4, "nodeName": "汴梁", "parentId": 0 }, { "childList": null, "data": { "addressName": "朝歌", "id": 5, "parentId": 0 }, "nodeId": 5, "nodeName": "朝歌", "parentId": 0 }, { "childList": null, "data": { "addressName": "昆仑山", "id": 6, "parentId": 0 }, "nodeId": 6, "nodeName": "昆仑山", "parentId": 0 }, { "childList": null, "data": { "addressName": "幽州", "id": 7, "parentId": 0 }, "nodeId": 7, "nodeName": "幽州", "parentId": 0 } ]

axious  
大家可以看到result.data得到的是一个json对象（以大括号开始和结束）。但是对象里面又有一个data这个data才是我们封装到apiResult里的。

{ "data": [ { "childList": [ { "childList": null, "data": { "addressName": "小沛县", "id": 8, "parentId": 1 }, "nodeId": 8, "nodeName": "小沛县", "parentId": 1 }, { "childList": [ { "childList": null, "data": { "addressName": "小沛", "id": 13, "parentId": 9 }, "nodeId": 13, "nodeName": "小沛", "parentId": 9 }, { "childList": null, "data": { "addressName": "德阳县", "id": 14, "parentId": 9 }, "nodeId": 14, "nodeName": "德阳县", "parentId": 9 } ], "data": { "addressName": "零陵郡", "id": 9, "parentId": 1 }, "nodeId": 9, "nodeName": "零陵郡", "parentId": 1 }, { "childList": [ { "childList": null, "data": { "addressName": "北陵镇", "id": 15, "parentId": 10 }, "nodeId": 15, "nodeName": "北陵镇", "parentId": 10 } ], "data": { "addressName": "江夏郡", "id": 10, "parentId": 1 }, "nodeId": 10, "nodeName": "江夏郡", "parentId": 1 }, { "childList": [ { "childList": null, "data": { "addressName": "盱眙县", "id": 16, "parentId": 11 }, "nodeId": 16, "nodeName": "盱眙县", "parentId": 11 } ], "data": { "addressName": "南郡", "id": 11, "parentId": 1 }, "nodeId": 11, "nodeName": "南郡", "parentId": 1 }, { "childList": [ { "childList": null, "data": { "addressName": "吴泽乡", "id": 17, "parentId": 12 }, "nodeId": 17, "nodeName": "吴泽乡", "parentId": 12 } ], "data": { "addressName": "武陵郡", "id": 12, "parentId": 1 }, "nodeId": 12, "nodeName": "武陵郡", "parentId": 1 } ], "data": { "addressName": "荆州", "id": 1, "parentId": 0 }, "nodeId": 1, "nodeName": "荆州", "parentId": 0 }, { "childList": [ { "childList": null, "data": { "addressName": "长山郡", "id": 18, "parentId": 2 }, "nodeId": 18, "nodeName": "长山郡", "parentId": 2 }, { "childList": null, "data": { "addressName": "长沙郡", "id": 19, "parentId": 2 }, "nodeId": 19, "nodeName": "长沙郡", "parentId": 2 } ], "data": { "addressName": "姑苏", "id": 2, "parentId": 0 }, "nodeId": 2, "nodeName": "姑苏", "parentId": 0 }, { "childList": [ { "childList": null, "data": { "addressName": "蜀郡", "id": 20, "parentId": 3 }, "nodeId": 20, "nodeName": "蜀郡", "parentId": 3 } ], "data": { "addressName": "常山", "id": 3, "parentId": 0 }, "nodeId": 3, "nodeName": "常山", "parentId": 0 }, { "childList": null, "data": { "addressName": "汴梁", "id": 4, "parentId": 0 }, "nodeId": 4, "nodeName": "汴梁", "parentId": 0 }, { "childList": null, "data": { "addressName": "朝歌", "id": 5, "parentId": 0 }, "nodeId": 5, "nodeName": "朝歌", "parentId": 0 }, { "childList": null, "data": { "addressName": "昆仑山", "id": 6, "parentId": 0 }, "nodeId": 6, "nodeName": "昆仑山", "parentId": 0 }, { "childList": null, "data": { "addressName": "幽州", "id": 7, "parentId": 0 }, "nodeId": 7, "nodeName": "幽州", "parentId": 0 } ], "message": "success", "success": true }

总结：原生态的ajax的返回结果直接就是我们在controller中返回的结果，即，下面的回调函数里的result就等于我们返回的结果。  
例，我在controller里面将apiResult返回了，那么在前端拿到的result就是返回结果。  
但是axious是vue又给我们封装了一层，即，用vue发送请求并得到的result是vue自己封装的对象，在我们的返回值上又封装了一层，它把我们返回的结果统统放到他自己定义的result的一个data属性里面，即result.data这个才是我们在controller中返回的结果apiResult对象，然后我们要想拿到对象的集合的再点一次即result.data.data。第二个data是我自己宰apiResult中封装的数据集。