Fetch API速查表:9个最常见的API请求
对于Fetch API我相信你已经用过它们很多次了,但是你是否还记得语法?如果能避免在旧项目中寻找半年前使用过的特定请求的语法,岂不更好?
在本文中,我将列出9个最常见的Fetch API请求,在你忘记API的时候可以翻出来查看。
为什么要使用Fetch API?
如今,我们被所有提供漂亮的SDK的服务宠坏了,这些SDK将实际的API请求抽象化,我们只需要使用典型的语言结构来请求数据,而不关心实际的数据交换。
但是,如果你所选择的平台没有SDK怎么办?或者如果你同时构建服务器和客户端呢?在这些情况下,你需要自己处理请求,这就是使用Fetch API的方法。
发送简单GET请求
- fetch('{url}').then(response => console.log(response));
发送简单POST请求
- fetch('{url}', {
- method: 'post'
- }).then(response => console.log(response));
使用授权令牌进行GET
- fetch('{url}', {
- headers: {
- 'Authorization': 'Basic {token}'
- }
- }).then(response => console.log(response));
使用查询字符串数据进行GET
- fetch('{url}?var1=value1&var2=value2')
- .then(response => console.log(response));
使用CORS进行GET
- fetch('{url}', {
- mode: 'cors'
- }).then(response => console.log(response));
使用授权令牌和查询字符串数据进行POST
- fetch('{url}?var1=value1&var2=value2', {
- method: 'post',
- headers: {
- 'Authorization': 'Bearer {token}'
- }
- }).then(response => console.log(response));
使用表单数据进行POST
- let formData = new FormData();
- formData.append('field1', 'value1');
- formData.append('field2', 'value2');
- fetch('{url}', {
- method: 'post',
- body: formData
- }).then(response => console.log(response));
使用JSON数据进行POST
- fetch('{url}', {
- method: 'post',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify({
- 'field1': 'value1',
- 'field2': 'value2'
- })
- })
- .then(response => console.log(response));
使用JSON数据和CORS进行POST
- fetch('{url}', {
- method: 'post',
- mode: 'cors',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify({
- 'field1': 'value1',
- 'field2': 'value2'
- })
- })
- .then(response => console.log(response));
如何处理Fetch API请求的结果
Fetch API返回一个Promise。这就是为什么我总是使用 .then() 和回调函数来处理响应的原因:
- fetch(...).then(response => {
- // process the response
- }
但是,如果您处于异步函数中,也可以等待结果:
- async function getData(){
- let data = await fetch(...);
- // process the response
- }
现在让我们看一下如何从响应中提取数据:
如何检查Fetch API响应的状态码
发送POST,PATCH和PUT请求时,我们通常对返回状态代码感兴趣:
- fetch(...).then(response => {
- if (response.status == 200){
- // all OK
- } else {
- console.log(response.statusText);
- }
- });
如何获取Fetch API响应的简单值
某些API端点可能会发回使用您的数据创建的新数据库记录的标识符:
- var userId;
- fetch(...)
- .then(response => response.text())
- .then(id => {
- userId = id;
- console.log(userId)
- });
如何转换Fetch API响应的JSON数据
但是在大多数情况下,您会在响应正文中接收JSON数据:
- var dataObj;
- fetch(...)
- .then(response => response.json())
- .then(data => {
- dataObj = data;
- console.log(dataObj)
- });
请记住,只有在两个Promises都解决后,你才能访问数据。这有时会让人有点困惑,所以我总是喜欢使用async方法并等待结果。
- async function getData(){
- var dataObj;
- const response = await fetch(...);
- const data = await response.json();
- dataObj = data;
- console.log(dataObj);
- }
总结
这些示例应该涵盖了大多数情况。
我是否错过了什么,一个你每天都在使用的请求?或者是其他你正在苦恼的事情?请在评论区上告诉我。
最后,你也可以以可打印的形式获得这份备忘单:https://ondrabus.com/fetch-api-cheatsheet
原文:https://www.freecodecamp.org/news/fetch-api-cheatsheet/
作者:Ondrej Polesny
本文转载自微信公众号「 前端全栈开发者」,可以通过以下二维码关注。转载本文请联系 前端全栈开发者公众号。
相关文章
- 新功能:AWS Database Migration Service 中的完全托管架构转换
- 开放预览:Amazon OpenSearch Serverless – 无需管理集群即可运行搜索和分析工作负载
- 全新 AWS Glue 4.0 — 全新和更新的引擎、更多数据格式等
- 新增功能 — AWS Backup 中的 Amazon Redshift 支持
- java 22_Java第22天
- AWS 资源管理器简介 – 快速查找您 AWS 账户中的资源
- 手把手带您玩转云原生文档数据库DocumentDB的地理空间
- 在Outposts上部署具有多可用区高可用性的 Amazon RDS服务
- Python-NumPy
- AppSync实现行情数据订阅/发布
- 推出 Amazon Neptune Serverless — 一个完全托管的图形数据库,可为您的工作负载调整容量
- Python_Socket
- java.sql.SQLException: java.lang.ClassCastException: java.math.BigInteger cannot be cast to java.lan
- 从 Kudu 迁移到 Hudi
- java nio管道_Java Nio 十三、Java NIO Pipe(管道)
- Redshift最佳实践之Aurora/DMS数据同步、无服务器架构以及权限管理
- 使用 AWS IoT TwinMaker 构建 IoT 设备的数字孪生并监控实时传感器数据(第 1 部分,共 2 部分)
- 使用 AWS IoT TwinMaker 构建 IoT 设备的数字孪生并监控实时传感器数据(第 2 部分,共 2 部分)
- 可实现高性能模型训练的 Amazon EC2 Trn1 实例现已推出
- AWS IoT FleetWise 现已正式发布 — 可轻松收集车辆数据并将其发送到云端