vue3 通过 axios + jsonp 实现根据公网 ip, 查询天气信息

前提

安装 axios 的 jsonp 适配器。

pnpm install @pingtou/axios-jsonp

简单使用说明:当与后端约定的请求 callback 参数名称不为为 callback 时,可修改。一般无需添加。
在这里插入图片描述

1. 获取当前电脑 ip 和城市信息

请求地址: https://whois.pconline.com.cn/ipJson.jsp?ip=&jsonp=true
注意添加 jsonp = true。 使用 jsonp 的方式,避免生产环境出现跨域无法访问。

import axios from 'axios';
import { jsonpAdapter } from '@pingtou/axios-jsonp';// 获取当前设备访问的 ip 地址,返回 ip 和城市信息
export async function fetchGetIpAndCity() {try {// 线上会出现跨域,使用 jsonp 请求return axios({url: 'https://whois.pconline.com.cn/ipJson.jsp?ip=&jsonp=true',adapter: jsonpAdapter,});} catch (error) {return '';}
}

返回如下:
在这里插入图片描述

2.根据上一步返回的城市信息,调用腾讯天气接口

请求地址:https://wis.qq.com/weather/common?source=pc&weather_type=observe&province=${province}&city=${city}&jsonp=true

传入省市,注意添加 jsonp=true

// 获取天气export async function fetchGetWeather(province: string, city: string) {try {// 通过 jsonp 请求,避免线上请求时跨域return axios({url: `https://wis.qq.com/weather/common?source=pc&weather_type=observe&province=${province}&city=${city}&jsonp=true`,adapter: jsonpAdapter,});} catch (error) {return {};}
}

效果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/54913.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux之我不会

一、常用命令 1.系统管理 1.1 systemctl start | stop | restart | status 服务名 案例实操 1 查看防火墙状态 systemctl status firewalld2 停止防火墙服务 systemctl stop firewalld3 启动防火墙服务 systemctl start firewalld4 重启防火墙服务 systemctl restart f…

dea插件开发-自定义语言9-Rename Refactoring

Rename 重构操作与Find Usages的重构操作非常相似。它使用相同的规则来定位要重命名的元素,并使用相同的单词索引来查找可能引用了被重命名元素的文件。执行重命名重构时,调用方法PsiNamedElement.setName()会为重命名的元素,调用该方法PsiRe…

【Canvas与诗词】秋夕.杜牧(银烛秋光冷画屏......)

【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>金六边形外圈绿色底录杜牧秋夕诗</title><style type"…

AI学习指南深度学习篇-丢弃法Python实践

AI学习指南深度学习篇-丢弃法Python实践 引言 在深度学习的领域中&#xff0c;丢弃法&#xff08;Dropout&#xff09;是一种有效的防止过拟合的随机正则化技术。过拟合是指模型在训练集上表现良好&#xff0c;但在测试集或未见过的数据上表现较差的现象。丢弃法通过随机地“…

【电商搜索】现代工业级电商搜索技术-Facebook语义搜索技术QueSearch

【电商搜索】现代工业级电商搜索技术-Facebook语义搜索技术Que2Search 目录 文章目录 【电商搜索】现代工业级电商搜索技术-Facebook语义搜索技术Que2Search目录0. 论文信息1. 研究背景&#xff1a;2. 技术背景和发展历史&#xff1a;3. 算法建模3.1 模型架构3.1.1 双塔与分类 …

Rust调用tree-sitter支持自定义语言解析

要使用 Rust 调用 tree-sitter 解析自定义语言&#xff0c;你需要遵循一系列步骤来定义语言的语法&#xff0c;生成解析器&#xff0c;并在 Rust 中使用这个解析器。下面是详细步骤&#xff1a; 1. 定义自定义语言的语法 首先&#xff0c;你需要创建一个 tree-sitter 语言定义…

NLP:BERT的介绍

1. BERT 1.1 Transformer Transformer架构是一种基于自注意力机制(self-attention)的神经网络架构&#xff0c;它代替了以前流行的循环神经网络和长短期记忆网络&#xff0c;已经应用到多个自然语言处理方向。   Transformer架构由两个主要部分组成&#xff1a;编码器(Encod…

【HarmonyOS】应用引用media中的字符串资源如何拼接字符串

【HarmonyOS】应用引用media中的字符串资源如何拼接字符串 一、问题背景&#xff1a; 鸿蒙应用中使用字符串资源加载&#xff0c;一般文本放置在resoutces-base-element-string.json字符串配置文件中。便于国际化的处理。当然小项目一般直接引用字符串&#xff0c;不需要加载s…

[dp+dfs]砝码称重

题目描述 现有 n n n 个砝码&#xff0c;重量分别为 a 1 , a 2 , … , a n a_1, a_2, \ldots,a_n a1​,a2​,…,an​ &#xff0c;在去掉 m m m 个砝码后&#xff0c;问最多能称量出多少不同的重量&#xff08;不包括 0 0 0 &#xff09;。 输入格式 第一行为有两个整数…

python爬虫:从12306网站获取火车站信息

代码逻辑 初始化 (init 方法)&#xff1a; 设置请求头信息。设置车站版本号。 同步车站信息 (synchronization 方法)&#xff1a; 发送GET请求获取车站信息。返回服务器响应的文本。 提取信息 (extract 方法)&#xff1a; 从服务器响应中提取车站信息字符串。去掉字符串末尾的…

如何通过Dockfile更改docker中ubuntu的apt源

首先明确我们有一个宿主机和一个docker环境&#xff0c;接下来的步骤是基于他们两个完成的 1.在宿主机上创建Dockerfile 随便将后面创建的Dockerfile放在一个位置,我这里选择的是 /Desktop 使用vim前默认你已经安装好了vim 2.在输入命令“vim Dockerfile”之后&#xff0c;…

知识付费APP开发指南:基于在线教育系统源码的技术详解

本篇文章&#xff0c;我们将探讨基于在线教育系统源码的知识付费APP开发的技术细节&#xff0c;帮助开发者和企业快速入门。 一、选择合适的在线教育系统源码 选择合适的在线教育系统源码是开发的关键一步。市场上有许多开源和商业化的在线教育系统源码&#xff0c;开发者需要…

花都狮岭寄宿自闭症学校:开启孩子的生命之门

在花都狮岭这片充满温情的土地上&#xff0c;有一所特别的学校&#xff0c;它像一把钥匙&#xff0c;轻轻旋转&#xff0c;为自闭症儿童们开启了一扇通往无限可能的生命之门——这就是广州星贝育园自闭症儿童寄宿制学校。这所学校不仅是知识的摇篮&#xff0c;更是孩子们心灵成…

React 启动时webpack版本冲突报错

报错信息&#xff1a; 解决办法&#xff1a; 找到全局webpack的安装路径并cmd 删除全局webpack 安装所需要的版本

Python(六)-拆包,交换变量名,lambda

目录 拆包 交换变量值 引用 lambda函数 lambda实例 字典的lambda 推导式 列表推导式 列表推导式if条件判断 for循环嵌套列表推导式 字典推导式 集合推导式 拆包 看一下在Python程序中的拆包&#xff1a;把组合形成的元组形式的数据&#xff0c;拆分出单个元素内容…

影响上证50股指期货价格的因素有哪些?

上证50股指期货&#xff0c;作为反映上海证券交易所最具代表性50只股票整体表现的期货合约&#xff0c;其价格同样受到一系列复杂因素的驱动。以下是对影响上证50股指期货价格的主要因素进行的详细分析。 因素一、期货合约的供求关系 股指期货市场是一个由多头和空头双方共同…

具身智能综述:鹏城实验室中大调研近400篇文献,深度解析具身智能

具身智能是实现通用人工智能的必经之路&#xff0c;其核心是通过智能体与数字空间和物理世界的交互来完成复杂任务。近年来&#xff0c;多模态大模型和机器人技术得到了长足发展&#xff0c;具身智能成为全球科技和产业竞争的新焦点。然而&#xff0c;目前缺少一篇能够全面解析…

面试遇到的质量体系10个问题(深度思考)

在某大型公司的招聘面试中关于质量体系本身及建设实践方面的10个问题&#xff0c;这些问题都是偏理论性强一些&#xff0c;但是可以通过这些问题来了解大型公司对质量体系的一些想法和预期的内容&#xff0c;本期先抛出来这10个问题&#xff0c;不附答案&#xff0c;目的就是让…

AI绘画:Stable Diffusion 终极炼丹宝典:从入门到精通

前言 我是Lison&#xff0c;以浅显易懂的方式&#xff0c;与大家分享那些实实在在可行之宝藏。 历经耗时数十个小时&#xff0c;总算将这份Stable Diffusion的使用教程整理妥当。 从最初的安装与配置&#xff0c;细至界面功能的详解&#xff0c;再至实战案例的制作&#xff…

数组基础(c++)

第1题 精挑细选 时限&#xff1a;1s 空间&#xff1a;256m 小王是公司的仓库管理员&#xff0c;一天&#xff0c;他接到了这样一个任务&#xff1a;从仓库中找出一根钢管。这听起来不算什么&#xff0c;但是这根钢管的要求可真是让他犯难了&#xff0c;要求如下&#x…