ajax 及 fetch API详解
-
XMLHttpRequest
const xhr = new XMLHttpRequest(); xhr.open('GET', 'http://domain/serivce'); // 须要留神的是 在申请发送前建设对状态的监听 有可能申请响应十分快，状态监听还没有实现 xhr.onreadystatechange = function (){ if(xhr.readyState !== 4){ return; } if(xhr.status === 200){ console.log(xhr.responseText) }else{ console.error(`HTTP error, status=${xhr.status},errorText=${xhr.statusText}`); } } // 超时 xhr.timeout = 3000; xhr.ontimeout = () => { console.log('以后申请超时啦') } // 文件上传进度 xhr.upload.onprogress = p => { const precent = Math.round((p.loaded / p.total) * 100) + '%'; } xhr.send(); - fetch
- 默认不带cookie
- 谬误不会reject
- 不反对超时设置
- 须要通过AbortController终止fetch
fetch('http://domain/serivce', {
method: 'GET',
credentials: 'same-origin', // omit: 默认 不带cookie same-origin：同域携带cookie include：即可同域携带，也可跨域携带
}).then(response => {
if(response.ok){
// 申请胜利
return response.json;
}
throw new Error('http error');
}).then(json => {
console.log(json)
}).catch(error => {
// 接管整体fetch谬误 throw new Error谬误
console.log(error);
})封装一个fetch 超时
function fetchTimeout(url, init, timeout = 3000){
return new Promise((resolve, reject) => {
fetch(url, init).then(resolve).catch(reject);
setTimeout(reject, timeout);
})
}
// 尝试一下：封装一个通用的异步函数的超时
// function (fn, timeout){ }中断fetch
const controller = new AbortController();
fetch('http://domain/serivce', {
method: 'GET',
credentials: 'same-origin',
siginal: controller.siginal
}).then(response => {
if(response.ok){
// 申请胜利
return response.json;
}
throw new Error('http error');
}).then(json => {
console.log(json)
}).catch(error => {
console.log(error);
})
// 勾销
// 会中断所有 controller.siginal 的 fetch
controller.abort();常见的浏览器申请/响应头/错误码解析
request header
method
path
cookie
referer: 判断浏览器来自哪个页面，标识拜访门路
user-angent：常常用来判断各种各样的环境，比方做投放业务
response header
access-control-allow-origin: 制订具体域名 或者 * 不做限度
content-encoding: gzip
set-cookie
status
200 get 胜利
201 post 胜利
301 永恒重定向
302 长期重定向
304 协商缓存 服务器文件未修改
400 客户端申请有语法错误，不能被服务器辨认
403 服务器受到申请，然而回绝提供服务，可能是跨域
404 申请的资源不存在
405 申请的method不容许
500 服务器产生不可预期的谬误
强缓存
max-age 毫秒数，接管cookie多少毫秒后生效
expired 代表什么时候过期，工夫扭转之后cookie有效性会产生偏差
协商缓存
last-modified 判断以后文件是否被批改 毛病：在服务器关上不作任何批改last-modified还是会扭转
eTag 把整体文件内容进行了hash判断文件是否有过批改 更加准确 然而更加耗费性能
问：为什么常见的 cdn 域名和业务域名不一样？
<!– www.baidu.com –>
<!– cdn.baidu-aa.com –>
- 平安问题 cookie 携带了身份信息，域名雷同的话会把不必要的用户信息传给cdn厂商，公司不想裸露
- cdn request header 会携带 cookie ,无畏的减少了更多的带宽占用、资源耗费
问：常见的vue react spa利用，都会存在index.html文件，也就是所谓的单页，针对index.html要做缓存的话，适宜做什么缓存？
如果肯定要做的话，协商缓存。
spa利用的html文件非常简单，可能基本没有什么内容，编译产出的script css文件会变成 script link标签插入html外面，而这些文件自身是有hash命名的，是为了避免js css的缓存，然而index.html是没有hash的。
js文件更新十分频繁，如果做了强缓存，更新不能实时下发到用户端上去；如果做了协商缓存，每次打包文件都会产生扭转，就能够失常拉去更新代码。
失常的的话是 no-cache no-store
发送申请的示例，以及封装一个多浏览器兼容的申请函数
interface IOption{
url: string,
type?: 'GET' | 'POST',
data: any,
timeout?: number
}
function formatUrl(object){
const dataArr = [];
for(let key in object){
dataArr.push(`${key}=${encodeURIComponent(object[key])}`)
}
return dataArr.join('&');
}
export function ajax(options: IOption = {
url: '',
type: 'GET',
data: {},
timeout: 3000
}) {
return new Promise((resolve, reject) => {
if(!options.url){
return ;
}
const queystring = formatUrl(options.data);
let timer;
let xhr;
const onStateChange = () => {
xhr.onreadystatechange = () => {
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status <= 300 || xhr.status === 304){
resolve(xhr.responseText);
}else{
reject(xhr.status);
}
}
}
}
if((window as any).XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if(options.type.toLowerCase() === 'GET'){
xhr.open('GET', `${options.url}?${queystring}`);
xhr.send();
}else if(options.type.toLowerCase() === 'POST'){
xhr.open('POST', options.url);
xhr.setRequestHeader(
'ContentType', 'application/json'
)
xhr.send(options.data);
}
if(options.timeout){
timer = setTimeout(() => {
xhr.abort();
reject('timeout')
}, options.timeout)
}
})
}
发表回复