文章目录
Fetch 简单使用
Fetch可以替代XMLHttpRequest实现异步请求
学习参考:简书使用 Fetch
fetch请求示例
请求JSON文件
fetch('http://example.com/movies.json')
.then(function(response){
return response.json();
})
.then(function(myjson){
console.log(myjson);
});
请求txt文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = ()=>{
let btn = document.getElementById('btn');
btn.onclick = async ()=>{//同步声明
let res = await fetch('./1.txt');//返回一个promise对象
let content = await res.text();//获取二进制数据
console.log(content);
}
}
</script>
</head>
<body>
<input type="button" value="ajax请求测试" id="btn">
</body>
</html>
请求图片或视频文件
注意:
一般请求视频大文件不使用该方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = ()=>{
let btn = document.getElementById('btn');
let img = document.getElementById('img');
btn.onclick = async ()=>{//同步声明
let res = await fetch('./images/1.jpg');//返回一个promise对象
let blob = await res.blob();//获取二进制数据
let url = URL.createObjectURL(blob);//转换成临时地址
img.src = url;
}
}
</script>
</head>
<body>
<input type="button" value="ajax请求测试" id="btn">
<img src="" alt="" id="img">
</body>
</html>