如何使用Async/Await链接两个Fetch API请求
使用Async/Await链接两个Fetch API请求的步骤如下：
- 首先，创建一个异步函数，可以使用
async关键字来定义该函数。例如：
async function fetchData() {
// 代码将在这里执行
}- 在该异步函数内部，使用
await关键字来等待第一个Fetch请求的响应。Fetch API是现代浏览器提供的用于发送网络请求的接口。例如：
async function fetchData() {
const response1 = await fetch('https://api.example.com/data1');
const data1 = await response1.json();
}上述代码中，fetch('https://api.example.com/data1')发送了一个GET请求，并返回一个Promise对象。使用await关键字等待该Promise对象的解析，然后使用response1.json()方法将响应转换为JSON格式。
- 接着，在第一个Fetch请求的响应处理完成后，可以使用同样的方式发送第二个Fetch请求，并等待其响应。例如：
async function fetchData() {
const response1 = await fetch('https://api.example.com/data1');
const data1 = await response1.json();
const response2 = await fetch('https://api.example.com/data2');
const data2 = await response2.json();
}上述代码中，fetch('https://api.example.com/data2')发送了第二个GET请求，并返回一个Promise对象。同样地，使用await关键字等待该Promise对象的解析，然后使用response2.json()方法将响应转换为JSON格式。
- 最后，可以在异步函数中对获取到的数据进行处理或者返回。例如：
async function fetchData() {
const response1 = await fetch('https://api.example.com/data1');
const data1 = await response1.json();
const response2 = await fetch('https://api.example.com/data2');
const data2 = await response2.json();
// 对获取到的数据进行处理或者返回
return { data1, data2 };
}上述代码中，可以根据实际需求对获取到的数据进行处理，然后可以选择将处理后的数据返回给调用方。
这样，就使用Async/Await成功地链接了两个Fetch API请求。注意，上述代码中的URL仅作为示例，请根据实际情况替换为真实的API地址。
相关·内容
(我是个新手，还在学习) 我需要使用两个API： 第一个包含所有客户订单信息 {“订单”：{ "id"："480cb439"，" Name“：”订单名称“，"clientId"：4 }，... } 第二个函数根据来自第一个API的参数返回客户端信息。{ "client"：{ "id"：4，"name"："John Doe“}} 目标很简单-从两个API</em
浏览 30提问于2020-12-05得票数 1
我想使用已经安装的React JSX和JWT API auth发布到登录表单。我不想使用axios post，而是想使用钩子方法useState、带有async/await的useEffect和onFormSubmit函数。如何发布状态和效果之间的数据值username和password。loggedIn: false, error: ''
浏览 5提问于2020-06-21得票数 0
所以我把我的API调用放在一个useCallback中 console.log("fetch is called again :(");
let response = await fetch("https://api.stackexchange.com/2.2/users()
浏览 8提问于2020-09-08得票数 2
回答已采纳
async function fetchRemoteData(name) { if (name) {payload = {"data":"some value"} 现在，假设我在浏览器中存储了数据(这显然不是我应该做的，但不管怎样)，如果我使用通用函数调用来获取它，
浏览 24提问于2020-10-09得票数 0
2回答
我熟悉使用Axios发布数据，但尝试使用fetch。我该如何转换为fetch请求，我认为我所做的是正确的… const data = new FormData(); 以下axios请求起作用： data.append( 'Image', this.state.image, this.state.image.name );
浏览 87提问于2019-01-31得票数 1
7回答
我知道，使用新的Fetch API (与GET 2017的async/await一起使用)，您可以发出如下所示的GET请求： try { let respon
浏览 10提问于2016-09-19得票数 61
回答已采纳
我需要在javascript中一个接一个地按串行顺序调用多个api。一个人的响应可能需要作为另一个人的输入。有没有人可以建议或者给出一个示例代码。我尝试使用.fetch() api，但发现很难将一个api的响应传递给另一个。
浏览 26提问于2020-07-13得票数 2
回答已采纳
2回答
但是，我的任务是用axios替换fetch。您能指导一下，axios中正确的代码替换方法是什么？const create = async (credentials, software) => {
return await fetch('/api/software/create', {我确信如果我使用axios，create()就会被消除。但是怎么做呢？请指点一下。
浏览 21提问于2019-01-15得票数 5
回答已采纳
4回答
我正在进行一个项目，它要求我向API发出请求。使用异步/等待方式发出POST请求的合适形式是什么？ const location = window.location.hostname; `
浏览 0提问于2018-04-26得票数 35
回答已采纳
我是javascript的新手，我正在使用危险api来解决危险的问题，这就是我所拥有的 var request = new XMLHttpRequest();
}) var base = "http:/&#x
浏览 35提问于2020-05-03得票数 1
有没有办法在单个getServerSideProps()中从多个API路由获取数据？ 我有一个表，我需要它来显示来自多个MongoDB集合的数据，并试图弄清楚如何提取这些数据。从本质上讲，我需要将这两个函数结合起来，但似乎找不到最佳的方法 export async function getServerSideProps() {
const res = await fetch(`${process.env.APP_DOMAIN}/api/${api
浏览 41提问于2021-01-03得票数 4
回答已采纳
3回答
我有一个执行3 window.fetch的方法 , API = { return fetch(`${API_URL}artist?message.body.artist_list[0].artist.artist_id;
console.log(
浏览 1提问于2018-02-15得票数 0
回答已采纳
我可以在ReactJS中的一个公共文件/组件中定义所有app，并在整个项目中使用它吗？ 我已经尝试了正常的方法，在React的component类中定义了事件侦听器。现在我想在一个公共的地方定义所有的API。" primary={true} style={style} onClick={(event) => this.handleClick(event)}/>//API1} 我希望在一个文件/组件中定义所有项目API</
浏览 24提问于2019-06-19得票数 1
2回答
我想填充一个使用fetch从3个端点获取数据的对象geoInfo，初始对象如下： let geoInfo = { user: null,}; 我会多次调用这个函数，这就是为什么我要添加条件:如果设置了geoInfo.ip，它就不会运行第一个fetch，如果设置了geoInfo.user，它也不会运行第二个fetch。based on ip. return new Promise((resolve, r
浏览 9提问于2020-08-06得票数 1
回答已采纳
1回答
我正在发送链接的Fetch请求。首先，我从数据库中检索数据，并请求与我得到的每个标题相关的图片。 在发送图像requests之前，不会将HTML代码加载到results div中。如何在开始发送图像requests之前加载文本？async function getArticles(params) {
url = 'http://127.0.0.1:8000/articles/api/?'<em
浏览 18提问于2021-01-22得票数 0
1回答
我正在尝试测试一个使用useState和useEffect的自定义钩子，以及一个模拟延迟加载数据的setTimeout。</div>; } return <h1>{value}</h1>;
如何使用Jest和酶测试这个钩子的所有可能状态
浏览 1提问于2020-03-03得票数 3
如何通过JWT从"http://localhost:3000“转到"https://www.h.net/users”？
浏览 20提问于2020-10-03得票数 0
我有以下代码： getWeather = e => { const api_call = fetch( ); console.log(data);
}; 但是我一直认为
浏览 30提问于2020-03-25得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
