什么是RESTful API？
RESTful API是一种基于HTTP协议的Web API，它通常以JSON或XML格式返回数据。它使用HTTP方法（例如GET，POST，PUT，DELETE）来执行对资源的操作，每个资源都由唯一标识符表示。
前端开发中为什么需要调用 RESTful API？
前端开发中，经常需要从后端服务器获取数据，并将这些数据展现在前端页面上。而RESTful API正是一种标准的方式来获取这些数据，也是目前最为流行的数据交互方式之一。因此，前端开发中需要调用后端提供的RESTful API。
如何调用 RESTful API？
调用RESTful API的过程可以分为以下几个步骤：
1. 确定API的URL和HTTP方法
API的URL是用于访问API的网络地址。通常，API的URL由服务器提供，并以特定的URL模式结构化。例如：
https://api.example.com/v1/users/123
其中，v1指API的版本号，users/123是API的资源路径，表示访问一个用户数据。HTTP方法指示对API资源执行的操作类型，例如：
- GET：获取资源
- POST：增加资源
- PUT：更新资源
- DELETE：删除资源
通常，这些HTTP方法与API的CRUD（增、查、改、删）操作对应。
2. 发起HTTP请求
在前端代码中，可以使用 XMLHttpRequest 或 fetch 发起HTTP请求。例如：
fetch('https://api.example.com/v1/users/123')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))代码中，首先使用 fetch 发起GET请求，之后使用 .then 方法处理JSON格式的响应数据。
3. 解析HTTP响应
在成功调用后端API后，前端代码通过HTTP响应获取服务器返回的数据。通常，RESTful API返回JSON格式的数据。可以使用 JSON.parse 方法解析JSON数据。例如：
fetch('https://api.example.com/v1/users/123')
.then(response => response.json())
.then(data => {
// 处理返回结果
})
.catch(error => console.error(error))4. 在页面上呈现数据
在获取到API返回的数据后，前端代码需要将这些数据展现在页面上。可以通过JavaScript操作DOM元素，将数据渲染到HTML页面上。例如：
fetch('https://api.example.com/v1/users/123')
.then(response => response.json())
.then(data => {
document.getElementById('username').textContent = data.username
document.getElementById('avatar').src = data.avatar_url
})
.catch(error => console.error(error))代码中，通过 getElementById 方法选取HTML元素，并修改其文本和属性值，以显示API返回的数据。
总结
在前端开发中，调用后端提供的RESTful API是获取数据的重要途径之一。通过确定API的URL和HTTP方法，并使用 XMLHttpRequest 或 fetch 方法发起HTTP请求，解析HTTP响应并在页面上呈现数据，可以实现前后端之间的数据交互，也是前端开发不可缺少的一部分。
示例代码
HTML页面
-- -------------------- ---- -------
-----
-------- ------------
-----
---- ----------- -------
------
-----
------------------------
----- ---------------------
------
------JavaScript代码
fetch('https://api.example.com/v1/users/123')
.then(response => response.json())
.then(data => {
document.getElementById('username').textContent = data.username;
document.getElementById('avatar').src = data.avatar_url;
})
.catch(error => console.error(error));来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649669a648841e98943904e4