Fetch API速查表:9个最常见的API请求

开发 前端
对于Fetch API我相信你已经用过它们很多次了,但是你是否还记得语法?如果能避免在旧项目中寻找半年前使用过的特定请求的语法,岂不更好?

[[354148]]

对于Fetch API我相信你已经用过它们很多次了,但是你是否还记得语法?如果能避免在旧项目中寻找半年前使用过的特定请求的语法,岂不更好?

在本文中,我将列出9个最常见的Fetch API请求,在你忘记API的时候可以翻出来查看。

为什么要使用Fetch API?

如今,我们被所有提供漂亮的SDK的服务宠坏了,这些SDK将实际的API请求抽象化,我们只需要使用典型的语言结构来请求数据,而不关心实际的数据交换。

但是,如果你所选择的平台没有SDK怎么办?或者如果你同时构建服务器和客户端呢?在这些情况下,你需要自己处理请求,这就是使用Fetch API的方法。

发送简单GET请求

  1. fetch('{url}').then(response => console.log(response)); 

发送简单POST请求

  1. fetch('{url}', { 
  2.   method: 'post' 
  3. }).then(response => console.log(response)); 

使用授权令牌进行GET

  1. fetch('{url}', { 
  2.   headers: { 
  3.     'Authorization''Basic {token}' 
  4.   } 
  5. }).then(response => console.log(response)); 

使用查询字符串数据进行GET

  1. fetch('{url}?var1=value1&var2=value2'
  2.     .then(response => console.log(response)); 

使用CORS进行GET

  1. fetch('{url}', { 
  2.   mode: 'cors' 
  3. }).then(response => console.log(response)); 

使用授权令牌和查询字符串数据进行POST

  1. fetch('{url}?var1=value1&var2=value2', { 
  2.   method: 'post'
  3.   headers: { 
  4.     'Authorization''Bearer {token}' 
  5.   } 
  6. }).then(response => console.log(response)); 

使用表单数据进行POST

  1. let formData = new FormData(); 
  2. formData.append('field1''value1'); 
  3. formData.append('field2''value2'); 
  4.  
  5. fetch('{url}', { 
  6.   method: 'post'
  7.   body: formData 
  8. }).then(response => console.log(response)); 

使用JSON数据进行POST

  1. fetch('{url}', { 
  2.   method: 'post'
  3.   headers: { 
  4.     'Content-Type''application/json' 
  5.   }, 
  6.   body: JSON.stringify({ 
  7.     'field1''value1'
  8.     'field2''value2' 
  9.   }) 
  10. }) 
  11. .then(response => console.log(response)); 

使用JSON数据和CORS进行POST

  1. fetch('{url}', { 
  2.   method: 'post'
  3.   mode: 'cors'
  4.   headers: { 
  5.     'Content-Type''application/json' 
  6.   }, 
  7.   body: JSON.stringify({ 
  8.     'field1''value1'
  9.     'field2''value2' 
  10.   }) 
  11. }) 
  12. .then(response => console.log(response)); 

如何处理Fetch API请求的结果

Fetch API返回一个Promise。这就是为什么我总是使用 .then() 和回调函数来处理响应的原因:

  1. fetch(...).then(response => { 
  2.    // process the response 

但是,如果您处于异步函数中,也可以等待结果:

  1. async function getData(){ 
  2.   let data = await fetch(...); 
  3.    // process the response 

现在让我们看一下如何从响应中提取数据:

如何检查Fetch API响应的状态码

发送POST,PATCH和PUT请求时,我们通常对返回状态代码感兴趣:

  1. fetch(...).then(response => { 
  2.   if (response.status == 200){ 
  3.     // all OK 
  4.   } else { 
  5.     console.log(response.statusText); 
  6.   } 
  7. }); 

如何获取Fetch API响应的简单值

某些API端点可能会发回使用您的数据创建的新数据库记录的标识符:

  1. var userId; 
  2.  
  3. fetch(...) 
  4.     .then(response => response.text()) 
  5.     .then(id => { 
  6.         userId = id; 
  7.         console.log(userId) 
  8.     }); 

如何转换Fetch API响应的JSON数据

但是在大多数情况下,您会在响应正文中接收JSON数据:

  1. var dataObj; 
  2.  
  3. fetch(...) 
  4.     .then(response => response.json()) 
  5.     .then(data => { 
  6.         dataObj = data; 
  7.         console.log(dataObj) 
  8.     }); 

请记住,只有在两个Promises都解决后,你才能访问数据。这有时会让人有点困惑,所以我总是喜欢使用async方法并等待结果。

  1. async function getData(){ 
  2.     var dataObj; 
  3.  
  4.     const response = await fetch(...); 
  5.     const data = await response.json(); 
  6.     dataObj = data; 
  7.     console.log(dataObj); 

总结

这些示例应该涵盖了大多数情况。

我是否错过了什么,一个你每天都在使用的请求?或者是其他你正在苦恼的事情?请在评论区上告诉我。

最后,你也可以以可打印的形式获得这份备忘单:https://ondrabus.com/fetch-api-cheatsheet

原文:https://www.freecodecamp.org/news/fetch-api-cheatsheet/

作者:Ondrej Polesny

本文转载自微信公众号「 前端全栈开发者」,可以通过以下二维码关注。转载本文请联系 前端全栈开发者公众号。

 

责任编辑:武晓燕 来源: 前端全栈开发者
相关推荐

2024-01-15 10:48:53

REST API系统架构

2021-01-09 16:16:40

开源软件速查表编程语言

2021-04-20 09:56:58

Python 开发编程语言

2024-10-29 15:42:13

2023-08-31 22:45:15

Git命令效率

2021-08-09 13:00:45

Linux速查表

2022-12-19 08:05:04

Python速查表知识点

2020-12-18 10:04:52

API漏洞应用程序编程接口

2009-10-26 16:08:40

Oracle默认用户名

2020-10-08 18:14:15

码农Git命令

2015-10-30 11:57:49

开发者设计师速查表

2022-12-15 07:45:51

极客版编程速查表

2011-03-16 09:49:54

HTML 5

2020-09-01 07:58:34

API漏洞黑客

2020-08-06 08:48:38

速查表系统管理员Linux

2022-03-08 15:13:34

Fetch APINode.js开发者

2017-10-30 13:34:22

深度学习KerasAPI

2021-09-01 15:48:50

API漏洞应用程序安全

2017-10-03 06:37:17

机器学习深度学习查表!

2015-07-29 10:46:20

Java错误
点赞
收藏

51CTO技术栈公众号