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 {};}
}