需要引入axios的两种方法
如果只在单页面写入需要引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
第二种
如果网络不好可以进入https://unpkg.com/axios/dist/axios.min.js然后右击另存为,保存下载使用的时候引入即可
然后就需要封装一下请求 请求是异步的 记得在封装请求前面写入async和解构赋值前面写入await这样就能获取到数据,代码如下
async function fn() {
let { data: res } = await axios.get("http://shiyansong.cn:8080/area/city?level=1")
return res.body
}
console.log(fn());
最后只需要我们再次封装一次对数据进行分类即可获取到地图右侧A,B,C城市分类,只需要我们对其循环进行判断即可。
async function add() {
//定义一个空对象用来存储判断完成后的数据
var obj = {};
//重新请求下以上封装的请求
let data = await fn()
//循环遍历我们的数据
data.forEach(item => {
//0是下标 只截取一个就能获取市区首字母
var name = item.short.slice(0, 1)
//判断是否存在 存在就赋值其他类内容 不存在添加首字母
if (obj[name]) {
obj[name].push(item)
} else {
obj[name] = [item]
}
});
console.log(obj);
}
add()
以下是在浏览器看到的效果