4-ES6fetch方法

image.png
image.png

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
https://blog.csdn.net/tjcjava/article/details/76468225

0.重点

1.跨域:
访问服务器的协议/域名/端口任一个不同都是跨域

一.什么是fetch方法

Fetch API提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念，例如CORS和HTTP的扩展。

请注意，fetch规范与jQuery.ajax()主要有两种方式的不同，牢记：

• 当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
• 默认情况下，fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）。
  --------MDN

简单的说,fetch就是用于向服务器请求数据的一种方法,它的返回值是Promise对象
与AJAX请求相区别:标记rejected和resloved状态的方式不同
rejected:网络故障或请求被阻止
resolved:包含404(无法找到请求的文件),500(AJAX如果请求发生错误,也会归到rejected里面)

二.fetch方法的使用

fetch("url",{option});
.then({function(response){} })
.catch({function(error){} })

三.打开虚拟服务器

1.在wamp64/www/ajax/test.php
修改为接收get方法传递的数据,并返回json
同理在用post传递数据的时候改成接收post方法传递过来的数据,并返回json
2.在浏览器输入127.0.0.1
打开ajax文件夹下的test.php文件
将此时的url地址传递给fetch方法
http://127.0.0.1/Ajax/test.php

image.png
image.png

四.代码测试

image.png
image.png