各位小伙伴,晚上好,介绍下和fetch的邂逅。
查看接口时,在请求上右键可以选择copy as fetch,就顺着这个线索了解了下。
- What?
- Why?
- How?
一、What?
就是一种请求方式,类似XHR,以前用Jquery的ajax来实现异步调用,
比如:输入用户名的时候,在Input框失去焦点就去后台查该用户是否存在,而不是用户填写完用户名、密码、验证码最后点击登录后再返回:用户已存在。这就是笔者接触异步-async(asynchronous)时候的使用场景之一;同步自然就是(synchronous)。
当然还有其他种种作用,网上解释很多,不在赘述。
二、Why?
网上说fetch优点如下:
- 语法简洁,更加语义化
- 基于标准 Promise 实现,支持 async/await
- 同构方便,使用 isomorphic-fetch
无论多少优点,都需要实践去支撑,用了才知道。
三、How?
1、控制台
fetch('https://img-blog.csdnimg.cn/20181213015645289.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21laWNlYXRjc2Ru,size_16,color_FFFFFF,t_70)')
直接请求天猫首页接口,看看返回的是什么?
是一个Promise
Promise是什么?就是一个对象。promise承诺的意思嘛。
接下来仿照 Fetch相比Ajax有什么优势?(感谢作者)
http://caibaojian.com/fetch-ajax.html 实践几个例子,感受一下fetch.
在下是在Eclipse中写的HTML5,启用Tomcat看了下页面,均操作成功。读者只用关心script即可。
案例1——XHR
<!DOCTYPE html>
<!--
Author:Huang Meice
2018年12月12日下午8:05:29
-->
<html>
<head>
<meta charset="UTF-8">
<title>XHR TEST</title>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.open('Get','https://zaq12wsxcde3.dazhuanjia.net/bff/homepage/baseline');
xhr.responseType='json';
xhr.onload= function() {
console.log(xhr.response);
}
xhr.onerror = function() {
console.log("Oops,error");
}
xhr.send();
</script>
</head>
<body>
<h1>XHR Test</h1>
</body>
</html>
结果:
控制台输出:
后续案例都是实现类似逻辑,不在贴图。
案例2——fetch 方法实现请求
<!DOCTYPE html>
<!-- Author:Huang Meice
2018年12月12日下午7:53:01 -->
<html>
<head>
<meta charset="UTF-8">
<title>Fetch01 fetch</title>
<script type="text/javascript">
fetch('https://zaq12wsxcde3.dazhuanjia.net/bff/homepage/baseline').then(function(response) {
return response.json();
}).then(function(data) {
console.log(data);
}).catch(function(e) {
console.log("Oops,error");
});
</script>
</head>
<body>
<h1>Fetch01 Test</h1>
</body>
</html>
案例3——fetch 优化,使用箭头
<!DOCTYPE html>
<!--
Author:Huang Meice
2018年12月12日下午8:15:41
-->
<html>
<head>
<meta charset="UTF-8">
<title>Fetch02 ES6-箭头函数</title>
<script type="text/javascript">
fetch('https://zaq12wsxcde3.dazhuanjia.net/bff/homepage/baseline').then(response => response.json()).then(data =>console.log(data)).catch(e => console.log("Oops,error",e));
</script>
</head>
<body>
</body>
</html>
案例4——fetch 使用ES7中的async/await
<!DOCTYPE html>
<!--
Author:Huang Meice
2018年12月13日上午12:46:13
-->
<html>
<head>
<meta charset="UTF-8">
<title>Fetch ES7-async/await</title>
<script type="text/javascript">
async function asyncFun() {
try{
let response = await fetch('https://zaq12wsxcde3.dazhuanjia.net/bff/homepage/baseline');
let data = await response.json();
console.log(data);
}catch(e){
console.log("Oops,error",e);
}
}
asyncFun();
</script>
</head>
<body>
<h1>Hello fetch-async/await</h1>
</body>
</html>
都是实现对同一个接口的请求,这样对fetch有了一个非常初步的了解。
后续再完善,晚安。对了,这次发现CSDN可以直接粘贴QQ的截图,非常棒!觉得Conflunce中非常亮眼的功能就是在Chrome浏览器中可以直接粘贴图片,很方便。