有哪些最常见的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); }
"有哪些最常见的API请求"的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站,小编将为大家输出更多高质量的实用文章!