![2024 年 API 趋势,哪些 API 将增加市场份额?](https://cdn.explinks.com/wp-content/uploads/2024/04/博客-理念-2024-年-API-趋势,哪些-API-将增加市场份额?.png)
2024 年 API 趋势,哪些 API 将增加市场份额?
有时,您不想使用框架或库来开发网站。相反您依赖于普通的旧式 HTML、CSS 和 Vanilla JavaScript。它们都能很好地工作,但也有一些局限性。其一是刷新页面以显示更新的数据。
幸运的是,有一种 Web API 可以帮助您从 API 中获取数据,然后在不刷新页面的情况下将其显示给用户。这就是 XMLHttpRequest API,在本篇中,我们将介绍它以及如何在网站上使用它。
如前所述,这是一个 Web API,可让您通过 REST API 端点与服务器通信,获取数据,然后在不刷新页面的情况下将数据显示给用户。您还可以通过该 API 在后台向服务器发送数据。
尽管名为 XMLHttpRequest API,但它并不局限于 XML 数据。您还可以通过此 API 请求 JSON 数据。
该 API 有多种属性和方法。下面我们就来讨论其中的几个:
它是 XMLHttpRequest API 的一个属性,可让您了解请求的状态。状态可以是 UNSENT、OPENED、HEADERS RECEIVED、LOADING 和 DONE。
该属性返回一个无符号短字符,表示对请求的响应状态。
这是 API 提供的一种方法,用于初始化 HTTP 请求。它需要五个参数,其中三个是可选参数。第一个必要参数是 HTTP 方法,第二个是 API 端点。
如果 HTTP 请求已经发送,此 API 方法会终止所有 HTTP 请求。
步骤1:
您需要创建一个项目。为此,请在计算机上创建一个文件夹,并在首选的代码编辑器中打开它。
步骤2:
完成后,在项目目录中创建一个名为 index.html 的文件,并在其中添加基本的 HTML 模板代码。如果你想快速复制粘贴,我在下面也提供了代码。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>XMLHttpRequest API</title> </head> <body> <script></script> </body></html>
步骤3:
现在让我们看看如何发出请求。首先,您需要初始化 XMLHttpRequest API 实例。具体操作如下
const xhr = new XMLHttpRequest();
现在,我们需要调用上面讨论过的打开方法。
xhr.open(method, url);
我们需要将响应类型更改为 JSON,让 API 知道我们需要 JSON 格式的数据:
xhr.responseType = 'json';
最后,我们需要发送请求。方法如下:
xhr.send();
您还需要处理 API 调用时收到的响应。为此,您需要在 XMLHttpRequest 实例上设置 onload 事件监听器。
xhr.onload = () => { console.log(xhr.response);};
您也可以将整个 XMLHttpRequest 代码封装在一个承诺中,然后等待它,使其成为异步代码。为了更好地理解,我还创建了一个快速演示。
const sendRequest = (method, url) => { const promise = new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open(method, url); xhr.responseType = 'json'; xhr.onload = () => { if (xhr.status >= 400) { reject(xhr.response); } resolve(xhr.response); }; xhr.send(); }); return promise;};const getData = async () => { try { const res = await sendRequest('GET', 'https://rapidapi.com/guides/api/rest'); console.log(res); } catch (err) { console.log(err); }};getData();
提交后:
{ "data": [ { "id": 1, "email": "john.doe@website.com", "first_name": "John", "last_name": "Doe" }, { "id": 2, "email": "richard.doe@website.com", "first_name": "Richard", "last_name": "Doe" }, { "id": 3, "email": "jane.doe@website.com", "first_name": "Jane", "last_name": "Doe" } ]}
XMLHttpRequest API 支持所有现代网络浏览器,包括 Chrome、Firefox、Edge、Opera 和 Safari。