掌握JavaScript中的提取API：综合指南。-DEV365 开发者社区

在Web开发领域，处理网络请求和从服务器获取数据是一个常见的任务。与XMLHTTPRequest相比，JavaScript中的提取API已成为提出HTTP请求的解决方案。在本指南中，我们将深入研究Fetch API，探索其功能，语法和最佳实践，以授权您掌握Web开发的这一基本工具。

术语的定义

a.p.i
的含义 A.P.I代表应用程序编程接口。这是一个软件中介机构，允许两个应用程序相互通信。它们是在应用程序内部和跨应用程序中提取和共享数据的可访问方法。

xmlhttprequest
它是JavaScript中的一个对象，可让您从网页向Web服务器提出HTTP请求。它通常用于从服务器检索数据，而无需刷新整个网页。

http请求
超文本传输协议旨在启用Web客户端（例如浏览器）从Web服务器请求网页，图像或数据之类的资源。 HTTP方法定义要在资源上执行的操作。这些方法是;

获取 - 从服务器检索数据。
发布 - 将数据发送到要处理的服务器。
put - 更新服务器上的现有资源。
删除 - 从服务器中删除资源。

什么是fetch api

fetch API是一个JavaScript接口，它提供了一种直接且灵活的方式来制作网络请求。它允许您使用HTTP或HTTPS协议从服务器中获取网页，图像或其他文件之类的资源。 Fetch API使用承诺，使其更优雅，更易于使用异步操作。

获取API语法11

fetch(url)  
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));

获取（URL）启动了指定URL的GET请求。该部分发送请求并返回承诺，以解决服务器的响应。

Promise链中的第一个“ .then（）”接收从fetch呼叫返回的响应，并在其上调用“ .json（）”方法。此方法将响应体解析为JSON。

第二个“ .then（）”将解析的JSON数据从上一个“ .then（）”返回并将其记录到控制台中。

捕获块将捕获错误并将其记录到控制台中。

让我们创建一个随机的用户生成器

此项目示例在单击按钮时从指定的URL中获取并显示随机用户数据。您可以在此处查看现场演示random user generator。

var img = document.querySelector("img");
var fullname = document.querySelector("#fullname");
var username = document.querySelector("#username");
var email = document.querySelector("#email");
var city = document.querySelector("#city");
var gender = document.querySelector("#gender");
var btn = document.querySelector("button");
var url = 'https://randomuser.me/api';

btn.addEventListener("click", function(){
  fetch(url)
  .then(handleErrors)
  .then(parseJSON)
  .then(updateProfile)
  .catch(printErrors)
})

function handleErrors(res){
  if (!res.ok){
    throw Error("There are some errors:" + res.status)
  }
  return res;
}

function parseJSON(res){
  return res.json().then(function(parsedData){
    return parsedData.results[0];
  });
}

function updateProfile(data){
  img.src = data.picture.medium;
  fullname.innerText = "Name: " + data.name.first + " " + data.name.last;
  username.innerText = "Username: " + data.login.username;
  gender.innerText = "Gender: " + data.gender;
  email.innerText = "Email: " + data.email;
  city.innerText = "City: " + data.location.city;
}

function printErrors(error){
  console.log(error);
}

html元素
使用document.queryselector选择各种html元素，然后将它们分配给变量。

事件听众
将事件侦听器添加到单击事件的“ BTN”元素中。单击按钮时，它会使用Fetch API触发一系列操作，以从指定的URL检索随机用户数据。

提取url
它用几个“。

handingerrors（）函数
在初始提取之后，它在“。然后”块中称为。它检查了使用“ res.ok”的API的响应是否成功（HTTP状态代码200）。如果存在错误（API返回错误状态代码），它将带有消息的错误，包括HTTP状态代码。

parsejson（）函数
在成功检索响应后，它被调用。它使用“ .json（）”方法将响应解析为JSON数据，并返回解析数据的第一个结果。

updateProfile（）函数
它采用了分析的数据并使用用户的信息更新页面上的各种HTML元素。

打印机（）函数
如果在承诺链中的任何时刻发生任何错误，它们会被记录到控制台的函数所捕获和处理。

总而言之，当按钮单击时，此代码向指定的URL提出API请求，处理任何潜在错误，将响应解析为JSON数据，并使用检索到的用户的信息更新页面，或者在错误的情况下记录错误。
这是提出API请求并使用获取数据更新网页的简单示例。

结论

在现代Web开发的世界中，Fetch API已成为不可或缺的工具，可以使数据异步获取数据。它的简单性，多功能性和与承诺的无缝集成使其成为构建响应式和动态的Web应用程序的宝贵资产。通过掌握提取API，您可以打开一个创建强大而有效的Web解决方案的可能性世界的大门。

目录

术语的定义

什么是fetch api

获取API语法11

让我们创建一个随机的用户生成器

结论