c语言sscanf函数的用法是什么
297
2023-05-12
Fetch API速查表：9个最常见的API请求
[[354148]]
对于Fetch API我相信你已经用过它们很多次了，但是你是否还记得语法?如果能避免在旧项目中寻找半年前使用过的特定请求的语法，岂不更好?
在本文中，我将列出9个最常见的Fetch API请求，在你忘记API的时候可以翻出来查看。
为什么要使用Fetch API?
如今，我们被所有提供漂亮的SDK的服务宠坏了，这些SDK将实际的API请求抽象化，我们只需要使用典型的语言结构来请求数据，而不关心实际的数据交换。
但是，如果你所选择的平台没有SDK怎么办?或者如果你同时构建服务器和客户端呢?在这些情况下，你需要自己处理请求，这就是使用Fetch API的方法。
发送简单GET请求
复制fetch({url}).then(response => console.log(response));
1.
发送简单POST请求
复制fetch({url}, {
method: post
}).then(response => console.log(response));
1.2.3.
使用授权令牌进行GET
复制fetch({url}, {
headers: {
Authorization: Basic {token}
}
}).then(response => console.log(response));
1.2.3.4.5.
使用查询字符串数据进行GET
复制fetch({url}?var1=value1&var2=value2)
.then(response => console.log(response));
1.2.
使用CORS进行GET
复制fetch({url}, {
mode: cors
}).then(response => console.log(response));
1.2.3.
使用授权令牌和查询字符串数据进行POST
复制fetch({url}?var1=value1&var2=value2, {
method: post,
headers: {
Authorization: Bearer {token}
}
}).then(response => console.log(response));
1.2.3.4.5.6.
使用表单数据进行POST
复制let formData = new FormData();
formData.append(field1, value1);
formData.append(field2, value2);
fetch({url}, {
method: post,
body: formData
}).then(response => console.log(response));
1.2.3.4.5.6.7.8.
使用JSON数据进行POST
复制fetch({url}, {
method: post,
headers: {
Content-Type: application/json
},
body: JSON.stringify({
field1: value1,
field2: value2
})
})
.then(response => console.log(response));
1.2.3.4.5.6.7.8.9.10.11.
使用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));
1.2.3.4.5.6.7.8.9.10.11.12.
如何处理Fetch API请求的结果
Fetch API返回一个Promise。这就是为什么我总是使用 .then() 和回调函数来处理响应的原因：
复制fetch(...).then(response => {
// process the response
}
1.2.3.
但是，如果您处于异步函数中，也可以等待结果：
复制async function getData(){
let data = await fetch(...);
// process the response
}
1.2.3.4.
现在让我们看一下如何从响应中提取数据：
如何检查Fetch API响应的状态码
发送POST，PATCH和PUT请求时，我们通常对返回状态代码感兴趣：
复制fetch(...).then(response => {
if (response.status == 200){
// all OK
} else {
console.log(response.statusText);
}
});
1.2.3.4.5.6.7.
如何获取Fetch API响应的简单值
某些API端点可能会发回使用您的数据创建的新数据库记录的标识符：
复制var userId;
fetch(...)
.then(response => response.text())
.then(id => {
userId = id;
console.log(userId)
});
1.2.3.4.5.6.7.8.
如何转换Fetch API响应的JSON数据
但是在大多数情况下，您会在响应正文中接收JSON数据：
复制var dataObj;
fetch(...)
.then(response => response.json())
.then(data => {
dataObj = data;
console.log(dataObj)
});
1.2.3.4.5.6.7.8.
请记住，只有在两个Promises都解决后，你才能访问数据。这有时会让人有点困惑，所以我总是喜欢使用async方法并等待结果。
复制async function getData(){
var dataObj;
const response = await fetch(...);
const data = await response.json();
dataObj = data;
console.log(dataObj);
}
1.2.3.4.5.6.7.8.
总结
这些示例应该涵盖了大多数情况。
我是否错过了什么，一个你每天都在使用的请求?或者是其他你正在苦恼的事情?请在评论区上告诉我。
最后，你也可以以可打印的形式获得这份备忘单：https://ondrabus.com/fetch-api-cheatsheet
原文：https://www.freecodecamp.org/news/fetch-api-cheatsheet/
作者：Ondrej Polesny
本文转载自微信公众号「 前端全栈开发者」，可以通过以下二维码关注。转载本文请联系 前端全栈开发者公众号。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
暂时没有评论，来抢沙发吧~