本文旨在解决在使用`fetch` API 的 `then()` 方法中，首次点击按钮时请求无效的问题。通过分析问题代码，解释了异步操作的执行顺序，并提供了使用 `async/await` 简化代码的方案。同时，针对 React 环境下 `useState` 的异步更新特性进行了说明，并给出了相应的解决方案。
在使用 fetch API 进行网络请求时，如果在 then() 方法中嵌套了另一个 fetch 请求，并且发现首次点击按钮时内部的 fetch 请求没有正确执行，这通常是由于对异步操作的理解不透彻以及代码中对 Promise 的处理方式不当导致的。
问题分析
原始代码中使用了 fetch 进行 POST 请求，然后在第一个 then() 中又嵌套了一个 fetch 进行 GET 请求，目的是获取新创建的 listing 的 ID。问题在于，嵌套的 GET 请求并没有被正确地等待，导致 listingId 在第一次点击时未能及时更新。
解决方案：返回 Promise
问题的根源在于，在第一个 then() 中发起的异步操作没有被 await 或返回，导致 Promise 链立即进入下一个 then()。要解决这个问题，需要确保 then() 中的异步操作返回一个 Promise。
.then(() => { return fetch("http://localhost:8080/api/listing") .then(res => res.json()) .then(data => { setListingID(data[data.length - 1].id); }) .catch(error => { console.log(error); });})
通过 return fetch(…)，确保内部的 fetch 请求返回的 Promise 被链式传递，从而保证后续的 then() 在内部请求完成后才执行。
更优雅的方案：使用 async/await
更推荐的做法是使用 async/await 来简化异步操作的代码，避免混用 await 和 then() 带来的潜在问题。
async function addListing() { try { let listing = { make: make, model: model, year: year, mileage: mileage, price: price }; await fetch("http://localhost:8080/api/listing", { method: "POST", headers: {"Content-type": "application/json"}, body: JSON.stringify(listing) }); const res = await fetch("http://localhost:8080/api/listing"); const data = await res.json(); const newListingID = data[data.length - 1].id; // 获取最新的listing ID setListingID(newListingID); // 更新 state console.log("Listing: ", newListingID, " Seller: ", sellerId); } catch (error) { console.log(error); }}
这段代码更加清晰易懂，使用 await 关键字确保每个异步操作都完成后再执行下一步。 使用 try…catch 块来处理错误，使得代码更加健壮。
React 中的 useState 异步更新
在 React 中，useState 的 set 方法是异步的，这意味着在调用 setListingID 后，listingId 的值不会立即更新。 如果需要立即使用更新后的值，应该使用一个临时变量来存储它。
const data = await res.json();const newListingID = data[data.length - 1].id; // 获取最新的listing IDsetListingID(newListingID); // 更新 stateconsole.log("Listing: ", newListingID, " Seller: ", sellerId);
总结
解决 fetch 在 then() 中首次点击无效的问题，关键在于理解异步操作的执行顺序和 Promise 的处理方式。 使用 async/await 可以简化代码，提高可读性。 在 React 中，需要注意 useState 的异步更新特性，并采取相应的措施来确保数据的正确性。 通过以上方法，可以有效地解决类似的问题，并编写出更加健壮和易于维护的代码。
以上就是解决fetch在then()中首次点击无效的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1534515.html
微信扫一扫 
支付宝扫一扫 
