前端与传统接口的桥梁：JSONP解决方案

1.JSONP原理

1.1.动态脚本注入

说明：通过创建 <script> 标签绕过浏览器同源策略

 1.2.回调约定

说明：服务端返回 函数名(JSON数据) 格式的JS代码

 1.3.自动执行

说明：浏览器加载脚本后立即触发前端预定义的回调函数（现代开发建议优先使用 CORS 替代）

2.测试接口

说明：apifox测试接口，响应成功。

3.安装依赖 

npm i jsonp

 

4.代码实现

说明：组件案例

<script setup>
import jsonp from "jsonp";  // 导入jsonp库用于跨域请求
import {onMounted} from "vue";  // 导入Vue生命周期钩子// 最短路径分析函数
async function shortestPathAnalysis(baseUrl, pointArr){return new Promise((resolve, reject) => {// 请求参数配置const params = {hasLeastEdgeCount: false,  // 是否按最少弧段数查找parameter: JSON.stringify({  // 将分析参数转为JSON字符串resultSetting: {  // 结果返回设置returnEdgeFeatures: null,  // 不返回弧段属性returnEdgeGeometry: null,  // 不返回弧段几何信息returnEdgeIDs: null,  // 不返回弧段IDreturnNodeFeatures: null,  // 不返回结点属性returnNodeGeometry: null,  // 不返回结点几何信息returnNodeIDs: null,  // 不返回结点IDreturnPathGuides: null,  // 不返回路径引导信息returnRoutes: true  // 返回路径结果},weightFieldName: "length",  // 使用长度作为权重字段barrierEdgeIDs: null,  // 障碍弧段IDbarrierNodeIDs: null,  // 障碍结点IDbarrierPoints: null,  // 障碍点turnWeightField: null  // 转向权重字段}),nodes: JSON.stringify(pointArr),  // 将坐标点数组转为JSON字符串sectionCount: '1',  // 分段数sectionIndex: '0'  // 分段索引};// 将参数对象转换为查询字符串const queryString = Object.entries(params).map(([key, value]) => `${key}=${encodeURIComponent(value)}`)  // 对每个值进行URL编码.join('&');  // 用&连接所有参数const url = `${baseUrl}?${queryString}`;  // 拼接完整URL// 发起JSONP请求jsonp(url, {param: 'callback',  // 回调参数名timeout: 100000  // 超时时间100秒}, (err, data) => {if (err) {reject(err);  // 错误时拒绝Promisereturn;}resolve(data);  // 成功时解析Promise});});
}// 测试请求函数
const orderRequest = async () => {// 调用最短路径分析，传入服务地址和两个坐标点let result = await shortestPathAnalysis("https://iserver.supermap.io/iserver/services/transportationanalyst-sample/rest/networkanalyst/RoadNet@Changchun/path.jsonp",[{"x": 4494.7646522178, "y": -4672.6392297989},  // 起点坐标{"x": 4504.7354942047, "y": -4679.9418182963}  // 终点坐标])
}// 组件挂载后自动执行测试请求
onMounted(() => {orderRequest()
})
</script><template><!-- 空模板 -->
</template><style scoped>
/* 空样式 */
</style>

5.响应效果

 说明：响应成功