vue前端通过腾讯接口获取用户ip的全过程
前言
之前在前端项目中获取用户ip的方式一直用的是搜狐的接口：http://pv.sohu.com/cityjson?ie=utf-8%22，同时这也是网上分享次数最多的接口，虽说提供的信息很少，但因为使用起来方便快捷，且基本没什么限制，所以还是挺不错的。但不知怎的，最新经常在调用时出现403Forbidden，要么就是胡乱给ip和地区，总之就是没法用。
没办法，是时候另寻他途了。在经过一番挑选后，最终选择了腾讯的位置信息服务。其它可选的还有百度、高德、天地图等。
腾讯位置服务
开发文档：https://lbs.qq.com/service/webService/webServiceGuide/webServiceIp
腾讯位置服务提供了非常多的地图和位置相关的功能，而我只用了其中的IP定位，颇有点杀鸡用牛刀的感觉。对于个人开发者，腾讯提供了10000次/天的调用量，并发上限为5次/秒，用于访问量不大的个人网页还是够用的。但是扩充配额只有成为企业开发者才能申请，所以对于访问量较大的个人网址，只能选别的了。
使用方法
1.注册账号并登录控制台
2.创建应用并添加key
在控制台中点击我的应用，然后点击创建应用，信息可以随意填。
创建好应用后，点击应用内的添加key：
在启用产品中，按照自己的需求选择类型，这里我根据需要选择WebServiceAPI，并在白名单内填入域名。
3.获取调用URL
进入WebServiceAPI的开发文档，选择IP定位，可以看到调用方式为URL+key。文档下方有调用示例，ip为选填，可以不填，那么最终的调用API为：
https://apis.map.qq.com/ws/location/v1/ip?key=NHLBZ-LRM6U-ER2VE-4RJPZ-VUFVH-27BED
在浏览器的地址栏中输入URL，可以看到返回了相关的信息：
4.在项目中调用API获取IP和地区信息
以vue项目为例，由于调用的API属于第三方地址，直接使用HTTP的get方式发送请求的话，会导致跨域，解决方式有多种，这里采用JSONP的方式进行解决。
4.1在项目中安装vue-jsonp
由于Axios并不支持jsonp的请求方式，所以需要安装第三方插件vue-jsonp。
npm i vue-jsonp -S
4.2调用API
编写一个方法用来调用获得的api：
import { jsonp } from 'vue-jsonp'
import config from '../config/config.json'
getUserIpConfig() {
return new Promise((resolve, reject) => {
jsonp(`https://apis.map.qq.com/ws/location/v1/ip?key=${config.MapKey}`, {
output: 'jsonp'
}).then(resp => {
resolve(resp)
}).catch(err => {
console.log(err);
})
})
}
由于jsonp是异步调用，因此外套一层promise，并使用async...await的方式实现同步。
另外需要注意的是，在发送请求时，请求体里必须加上output: 'jsonp'，否则会出现跨域问题。
async getAddress() {
let positionInfo = await this.getUserIpConfig()
// ......
}
至此，使用腾讯位置服务获取用户ip的方式介绍完毕。
总结
到此这篇关于vue前端通过腾讯接口获取用户ip的文章就介绍到这了,更多相关vue前端获取用户ip内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了优化Vue中date format的性能详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
本文主要介绍了vue全局挂载实现APP全局弹窗的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
Vue3+TS+Vant3+Pinia(H5端)配置教程详解
这篇文章主要介绍了Vue3+TS+Vant3+Pinia(H5端)配置教程详解,需要的朋友可以参考下2023-01-01
我们对Vue中data数据的修改会导致界面对应的响应变化，而通过nextTick方法，可以在传入nextTick的回调函数中获取到变化后的DOM，讲起来可能还是有点梦幻，下面我们直接使用nextTick体验一下效果2022-08-08
这篇文章主要介绍了vue3+echarts实现渐变色环形图过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
vue el-form一行里面放置多个el-form-item的实现
本文主要介绍了vue el-form一行里面放置多个el-form-item的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
最近工作中遇到了npm run dev报错这个问题,通过查找相关资料最终解决了,所以下面这篇文章主要给大家介绍了关于npm run dev失败的详细解决办法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
在浏览网页时我们有些时候需要记住一些用户选择的信息,比如登陆时我们如果选择了记住密码,那么我们下次进入该网页时就会有你上次的登陆信息,下面这篇文章主要给大家介绍了关于vuex存储数据的几种方法,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue3路由新玩法useRoute和useRouter，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
toRef和toRefs可以用来复制reactive里面的属性然后转成 ref,它保留了响应式,也保留了引用,也就是你从 reactive 复制过来的属性进行修改后,除了视图会更新,原有 ractive 里面对应的值也会跟着更新,本文介绍Vue3中toRef和toRefs的区别和用法,需要的朋友可以参考下2024-08-08
最新评论