本文旨在解决在使用`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() 在内部请求完成后才执行。
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
更优雅的方案：使用 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 ID
setListingID(newListingID); // 更新 state
console.log("Listing: ", newListingID, " Seller: ", sellerId);总结
解决 fetch 在 then() 中首次点击无效的问题，关键在于理解异步操作的执行顺序和 Promise 的处理方式。 使用 async/await 可以简化代码，提高可读性。 在 React 中，需要注意 useState 的异步更新特性，并采取相应的措施来确保数据的正确性。 通过以上方法，可以有效地解决类似的问题，并编写出更加健壮和易于维护的代码。
