关于jsonp的总结

关于jsonp的总结

一. 解决的问题

jsonp只能解决GET类型的ajax请求跨域问题
jsonp请求不是ajax请求, 而是一般的get请求

二. 基本原理(分3部)

浏览器端:

动态生成<script>来请求后台接口(src就是接口的url)
定义好用于接收响应数据的函数(fn), 并将函数名通过请求参数提交给后台(如: callback=fn)

服务器端:

接收到请求处理产生结果数据后, 返回一个函数调用的js代码, 并将结果数据作为实参传入函数调用

浏览器端:

收到响应自动执行函数调用的js代码, 也就执行了提前定义好的回调函数, 并得到了需要的结果数据

三. 实际应用

若要想在自己的项目中获取百度地图API中的天气信息 直接调取是不行的 会产出跨域
所以可以使用 npm 中的 jsonp包 来发请求

1. 安装

npm i jsonp  or  yarn add jsonp

1. 不要直接使用 要封装成 promise 在外边可以用 async await 调用

/*
json请求的接口请求函数
*/
export const reqWeather = (city) => {

 return new Promise((resolve, reject) => {
   const url = `http://api.map.baidu.com/telematics/v3/weather?location=${city}&output=json&ak=3p49MVra6urFRGOT9s8UBWr2`
   // 发送jsonp请求
   jsonp(url, {}, (err, data) => {
     console.log('jsonp()', err, data)
     // 如果成功了
     if (!err && data.status==='success') {
       // 取出需要的数据
       const {dayPictureUrl, weather} = data.results[0].weather_data[0]
       resolve({dayPictureUrl, weather})
     } else {
       // 如果失败了
       message.error('获取天气信息失败!')
     }

   })
 })
}

关于jsonp的总结

原文：https://www.cnblogs.com/var-chu/p/12153199.html