解决fetch在then()中首次点击不工作的问题_技术教程

本文针对在使用`fetch` API进行POST请求后，紧接着在`.then()`回调中执行GET请求时，第一次点击事件无法正确获取数据的问题，提供了详细的分析和解决方案。通过结合`async/await`和理解React状态更新的异步性，可以有效避免此类问题，并确保数据操作的准确性和可靠性。

在使用fetch API处理异步请求时，特别是在.then()回调中嵌套fetch请求时，可能会遇到一些意想不到的问题，例如，第一次点击事件无法正确获取数据。这通常是由于对Promise的理解不够深入，以及对异步操作执行顺序的误解造成的。以下将详细分析问题原因，并提供几种有效的解决方案。

问题分析

问题的核心在于.then()回调中执行的fetch操作也是异步的，但代码中并没有等待该异步操作完成就继续执行后续的.then()回调。这导致listingId在第一次点击时并没有被正确设置，因此输出的是旧值或者初始值。

解决方案

1. 返回Promise

最直接的解决方法是在第一个.then()回调中返回内部fetch操作的Promise。这样，外部的.then()回调就会等待内部fetch操作完成后再执行。

.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);
     });
})

2. 使用async/await

更推荐的方式是使用async/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();
    setListingID(data[data.length - 1].id);
    console.log("Listing: ", listingId, " Seller: ", sellerId);
  } catch (error) {
    console.log(error);
  }
}

3. React状态更新的异步性

如果代码是在React中使用，还需要注意useState的set方法是异步的。这意味着，在调用setListingID后，listingId的值并不会立即更新。如果需要在状态更新后立即使用新的listingId值，应该将该值存储在一个临时变量中。

const data = await res.json();
const newListingID = data[data.length - 1].id;
setListingID(newListingID);
console.log("Listing: ", newListingID, " Seller: ", sellerId);