获取 API

长期以来，Web 开发人员信任的“朋友”一直在使用XMLHttpRequest 。 XMLHttpRequest 启用了 ajax 和一种全新的交互方式。
但是， Fetch API正在慢慢取得成功。它们都提供相同的工作，即从不同的网络异步获取数据，但 Fetch API 是基于 Promise 的。这提供了更干净、更简洁的语法。
Fetch API 提供在窗口对象上定义的 fetch() 方法。这用于执行请求。此方法返回一个 Promise，可进一步用于检索请求的响应。
基本语法：

fetch(url) //call the fetch function passing the url of the API as a parameter
.then(function(){
  //code for handling data from API
});
.catch(function(){
  //code when the server returns any error
});

注意：默认情况下， fetch() 不会从服务器发送或接收任何 cookie，从而导致未经身份验证的请求。
以下是当我们得到关于我们想要对信息做什么的回应时可以使用的方法列表：

1. clone()：用于创建响应的克隆。
2. redirect()：用于创建具有不同 url 的强烈响应。
3. arrayBuffer()：我们返回一个用 ArrayBuffer 解析的 Promise。
4. formData()：还返回一个用 FormDataObject 解析的 Promise。
5. blob()：与上面相同，只是用 blob 解析。
6. text()：这用字符串解析。
7. json()：它使用 JSON 解析承诺。

要求：
Request 对象表示 fetch 调用的请求部分。通过传递 fetch 请求，您可以发出高级和自定义请求：

1. 方法： GET、POST、PUT
2. url:请求的 URL
3. 标头：标头对象
4. referrer：请求的引用者
5. 模式： cors、no-cors、同源
6. 凭据： cookie 应该与请求一起使用吗？省略，同源
7. 缓存：缓存模式（默认，重新加载，无缓存）

加载 JSON
我们不能阻止用户界面等待请求完成。这就是 fetch() 方法返回 Promise 的原因。承诺实际上是一个代表未来结果的对象。 then() 方法用于等待来自服务器端的响应并将其记录到控制台。
下面的代码片段解释了上述逻辑：

javascript

fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
.then(res=>res.json())
.then(json=>console.log(json));

异步...等待
这提供了一种更简洁的方式来处理 Promise。它的功能是我们可以将函数标记为 async，然后等待 promise 完成 await，然后将结果作为普通对象访问。
演示如何使用 async...await 的简单示例：

javascript

async function demo(subject){
   const URL='https://www.reddit.com/r/javascript/top/.json?limit=5';
   const Res= fetch(URL);
   const response= await Res;
   const json= await response.json();
   console.log(json);
}
demo('javascript');

处理错误：
如果我们向服务器询问需要权限/授权的不存在资源怎么办？使用 fetch()，我们可以处理应用程序级别的错误，例如 404 响应。
尽管 Fetch API 正在取代 XMLHttpRequest，但初学者仍然需要学习 XMLHttpRequest 才能更有效地使用 Fetch API。
参考： https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API