使用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里的数据就行了,所以将原来的代码改正如下

终于成功了,脑袋疼!!!

转载于:https://www.cnblogs.com/Smiled/p/7691112.html

使用vue-axios请求geoJson数据报错的问题相关推荐

vue+axios请求时设置request header请求头（带上token）
vue+axios请求时设置请求头(带上token) 1.在vue中,向后台发送请求,不管是get或post,url要带上userId,headers要带上token值(本地存储的token,wind ...
vue axios请求成功进入catch原因
START 仅以此文,纪念这个离谱的bug,o(╥﹏╥)o 问题长话短说,使用axios进行请求,浏览器f12检查,请求成功.但是代码逻辑还是进入axios的catch模块. 原因当axios请求 ...
vue——axios请求成功却进入catch的原因
问题 axios返回200状态码(即请求成功)却走进了catch里面原因当axios请求完成后走的时then的代码块,如果then代码块中存在错误代码信息,这时就会进入catch中抛出异常(注意: ...
vue axios 请求不带cookie问题
场景: 有时后端需要处理验证前端带有的cookie, 然而axios请求默认不携带cookie,所以后端获取不到cookie导致验证失败. 解决方法(二者选其一就行): 1. 每次想携带cookie的 ...
vue axios传参报错的解决方法
为什么jquery和axios用法类似,但是请求时传参类型却不同? jquery默认 form Data(如:url?a=1形式): 因为jquery在执行post请求时,会默认设置Content-T ...
Vue axios请求自带域名，接口及项目名
Vue 请求时带域名和接口原因绝对是打包时 baseURL的书写有问题 :我碰到一个问题请求的 BaseURL ='http://*******:888/api/psplat/ 结尾缺少单引号 ...
VUE axios 请求帮助类
axios帮助类 import Vue from "vue"; import axios from 'axios'axios.defaults.headers['Content-T ...
vue axios请求成功却进入catch的原因分析
问题:post请求-URL传参方式 axios返回200状态码(请求成功),数据不更新却走进了catch里面原因: then()方法里的逻辑代码错误,所以接口走进了catch,具体如下: post: ...
Vue axios拦截器使用
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端.这篇文章主要介绍了vue/axios请求拦截的相关知识,需要的朋友可以参考下 axios使用拦截器在请求或响应 ...

使用vue-axios请求geoJson数据报错的问题

使用vue-axios请求geoJson数据报错的问题相关推荐

最新文章

热门文章