使用vue-axios請求geoJson數據報錯的問題

最近的項目用到了echarts一個帶有散點地圖的圖表,按照正常jquery寫法應該使用ajax請求geojson的數據動態去切換地圖,就像下面這樣

 $.get('Js/map/' + cityData.name + '.json', function(geoJson) {
         map('gr-map', cityData, geoJson, geoCoordMap);//調用地圖方法
       });

頁面顯示(成功)

but我們使用vue重構了這個項目,在寫到這里的時候發現地圖不顯示了,結果報錯

在這里使用的vue-axios去請求數據,寫法如下

 var url = 'http://localhost:8080/static/map' + cityData.name + '.json';
  console.log(url)
 this.$http.get(url).then(geoJson => {
  // 請求數據成功
   if (geoJson) {
      that.map('gr-map', cityData, geoJson, geoCoordMap);
      }
       }, response => {
          //請求數據失敗
       });

套路還是原來的套路,配方還是原來的配方,但是為啥會報錯呢,第一反應就是地圖沒有注冊上,找到注冊地圖的代碼發現也沒有問題,既然如此那就是數據有問題了,分別將j使用query里get方法請求的json數據和使用axios請求的數據打印出來,果然問題出在這里

打印結果如下:

jquery(只返回了一個正常的json數據)

axios(返回了一個完整的包含各種狀態信息的對象,geoJson被存在其中的data屬性里)

而注冊地圖時只需要用到data里的數據就行了,所以將原來的代碼改正如下

終於成功了,腦袋疼!!!