JSONP及Axios

最新推荐文章于 2023-08-29 20:18:45 发布

前端-笙

最新推荐文章于 2023-08-29 20:18:45 发布

阅读量2.7k

点赞数 1

文章标签：前端 javascript typescript

本文链接：https://blog.csdn.net/qq_48847448/article/details/126610694

版权

jsonp

概述：JSONP是一种跨域解决方案，它主要是利用了script标签不受跨域影响的特性来完成对应的请求操作。实际上是一个get请求。

什么叫跨域

同源策略（属于浏览器的）为了安全性。

浏览器采用了对应的同源策略，它防止了对应的恶意请求以及其他非正常请求（一定程度）

同源策略对应的要求

协议相同
端口号相同
ip地址相同

跨域的产生（由于同源策略影响导致后台接口不能被访问）

协议不同
端口不同
ip地址不同
ftp请求资源不同也跨域

跨域的解决

后端解决（设置响应头）

response.setHeader('Access-Control-Allow-Origin','*') //设置所有的请求地址都允许跨域
response.setHeader('Access-Control-Allow-Origin-Method','*') //设置所有请求方法都允
许跨域

前端解决（JSONP）

代理服务器

iframe script link 都不受跨域的影响（src href）
webSocket（套接字）

JSONP

JSONP的优点：

它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点：

它只支持GET请求而不支持POST等其它类型的HTTP请求； jsonp使用的场景--查询居多

百度搜索接口

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=miqi&cb=fn

wd表示关键词 cb表示回调函数通过回调函数将对应的结果传出

JSONP的流程

<script>
// var wd = '奥特曼'
function fn(result){
console.log(result);
}
</script>
<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=奥特曼
&cb=fn"></script>

由上述代码我们可以看到这个fn这个函数我们根本没有调用而是通过链接一个script地址来完成对应的数据请求及函数调用。所以在这个里面回调函数是服务端调用的。

JSONP的封装

function jsonp(url,param={},paramName,callback){
if(typeof url != 'string'){
throw new Error('url必须为字符串')
}
url += '?'
// 将param转为&拼接
for(let key in param){
url += `&${key}=${param[key]}`
}
//函数名需要加工(保持的函数名的唯一)
let callbackName = 'fn' + Date.now() + Math.ceil(Math.random()*10)
//加给对应的window
window[callbackName] = callback
//将参数名和回调函数名传入
url += `&${paramName}=${callbackName}`
//创建一个script标签
let script = document.createElement('script')
//指定对应的src地址
script.src = url
//加给body
document.body.appendChild(script)
//script标签加载完毕
script.onload = function(){
this.remove() //将script标签删除
delete window[callbackName] //将对应的属性删除
}
}

promise封装

function jsonp(url,param={},paramName){
return new Promise((resolve,reject)=>{
if(typeof url != 'string'){
throw new Error('url必须为字符串')
}
url += '?'
// 将param转为&拼接
for(let key in param){
url += `&${key}=${param[key]}`
}
//函数名需要加工(保持的函数名的唯一)
let callbackName = 'fn' + Date.now() + Math.ceil(Math.random()*10)
//加给对应的window
window[callbackName] = resolve //resolve里面的参数会被then接收 这个resolve会
被服务器自动调用并传入参数
//将参数名和回调函数名传入
url += `&${paramName}=${callbackName}`
//创建一个script标签
let script = document.createElement('script')
//指定对应的src地址
script.src = url
//加给body
document.body.appendChild(script)
//script标签加载完毕
script.onload = function(){
this.remove() //将script标签删除
delete window[callbackName] //将对应的属性删除
}
//script报错的时候
script.onerror = function(err){
reject('错误'+err)
}
})
}

http协议

缓存

缓存提高的文件访问速度，减少请求。locaStorage本地缓存 sessionStorage 本地缓存。从
locaStorage读取速度比对应的请求速度要快。提高对应的效率。（优化）
在http请求的过程中如果你重复的请求，我们服务器并不会重复的响应（如果是重复响应服务器压力就很大了），所以你http内部就存在了缓存机制。

强制缓存（http请求里面）

强制缓存不会让你发送请求（直接从缓存读取）状态200

cache-control http2.0 缓存控制器相对时间

cache-control:max-age=60
//60秒内 再访问这个网站 从本地读

expires http 1.0 过期时间绝对时间

协商缓存（http请求里面）

协商缓存一定会请求，文件如果改变了就会通过协商缓存（验证文件是否变化变了重新响应过来没变化就先回来再从本地读取）状态码 304（没变）或者200（变了）

etag 标识根据对应hash码生成一个特定的码，文件一变这个码会重新生成（根据它就可以区分是否变化了）

last-modified 最后的修改时间（时间如果改了证明对应文件就变了就可以区分文件是否发生变化）
优先级强制缓存高于协商缓存

总结

先强制缓存再协商缓存
文件没变强制缓存文件变了协商缓存
强制缓存不会请求协商缓存会请求

Axios

axios是一个基于promise的http请求库。

特性

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应（拦截器）
转换请求数据和响应数据（自动进行数据转换）
取消请求（可以请求取消）
自动转换 JSON 数据（转换的数据形式以json格式体现）
客户端支持防御 XSRF （安全性高）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name=
"
viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./axios.min.js"></script>
<script>
// 拦截器
//请求拦截
axios.interceptors.request.use(config => {
// Do something before request is sent
return config;
}, error => {
// Do something with request error
return Promise.reject(error);
});
//响应拦截
axios.interceptors.response.use(response => {
// Do something before response is sent
return response;
}, error => {
// Do something with response error
return Promise.reject(error);
});
//指定请求的根路径
axios.defaults.baseURL= 'https://autumnfish.cn'
//指定请求头
// axios.defaults.headers
//指定超时时间
// axios.defaults.timeout
axios.get('/top/playlist', {
limit: 10
})
.
then(res => {
console.log(res)
})
.
catch(err => {
console.error(err);
})
// axios.post(url,params)
// .then(res => {
// console.log(res)
// })
// .catch(err => {
// console.error(err);
// })
// delete
// put
// patch
// all 所有请求都适配
</script>
</body>
</html>