Fetch-1-初识fetch

各位小伙伴，晚上好，介绍下和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浏览器中可以直接粘贴图片，很方便。

猜你喜欢