當(dāng)多次異步操作競爭時，JavaScript中的種族條件發(fā)生，導(dǎo)致不可預(yù)測的結(jié)果；處理它們：1。使用AbortController取消以前的請求，以確保僅最新請求會影響UI； 2.跟蹤序列號的跟蹤請求訂單，僅在無法取消時僅處理最新響應(yīng)； 3。僅在響應(yīng)是最新響應(yīng)時，請使用ASYNC/等待適當(dāng)?shù)腻e誤處理和更新共享狀態(tài)； 4.通過使用不可變的更新，狀態(tài)管理庫或排隊機(jī)制來避免在同一操作中共享狀態(tài)，以順序處理任務(wù)； 5。僅在預(yù)期最快的結(jié)果時使用Promise.race（），否則首選Promise.lop.all（）或Promise.AllSettled（）可靠地處理所有結(jié)果 - 通過控制結(jié)果的應(yīng)用方式，以無法預(yù)測的完成訂單來處理所有結(jié)果。

當(dāng)多次異步操作競爭首先完成時，JavaScript中的種族條件就會發(fā)生，最終結(jié)果取決於它們完成的順序 - 您無法可靠地預(yù)測。在Web應(yīng)用程序中進(jìn)行多個API調(diào)用，處理用戶交互或管理狀態(tài)更新時，這在Web應(yīng)用程序中很常見。這是有效處理它們的方法。

1。使用abortcontroller取消以前的請求

最常見的種族條件之一發(fā)生在搜索輸入或自動搜索中，其中快速用戶鍵入會導(dǎo)致多個API調(diào)用，並且較慢的呼叫可能會在更快的速度後返回，從而顯示出過時的結(jié)果。

解決方案：使用AbortController取消過時的請求。

讓控制器；

異步函數(shù)搜索（查詢）{
  //取消任何以前的請求
  如果（控制器）{
    controller.abort（）;
  }

  控制器= new AbortController（）;

  嘗試 {
    const響應(yīng)=等待提?。╜/api/search？q = $ {query}`，{
      信號：控制器。訊號,
    }）;
    const結(jié)果=等待響應(yīng).json（）;
    updateUi（結(jié)果）; //僅最新查詢更新UI
  } catch（錯誤）{
    if（error.name！=='aborterror'）{
      Console.Error（'Fetch錯誤：'，錯誤）;
    }
  }
}

這樣可以確保最新的請求會影響UI - 在解決之前，較舊的請求被取消。

2。帶有序列編號的跟蹤請求訂單

有時您無法取消請求（例如，較舊的瀏覽器，非提取API），但您仍然需要忽略過時的響應(yīng)。

解決方案：為每個請求分配一個序列編號，僅處理最新的序列編號。

令請求= 0;

異步函數(shù)fetchdata（QUERY）{
  const CurrentRequestID = requestCount;

  const響應(yīng)=等待提?。╜/api/data？q = $ {query}`）;
  const data =等待響應(yīng).json（）;

  //僅在最新請求時處理結(jié)果
  if（currentRequestid === requestCount）{
    UpdateUi（數(shù)據(jù)）;
  }
  //如果已經(jīng)提出了新的請求，請忽略
}

當(dāng)無法取消或使用輪詢機(jī)制時，此模式很有用。

3。使用異步/等待適當(dāng)?shù)腻e誤處理

當(dāng)多個異步操作修改共享狀態(tài)時，也可能發(fā)生種族條件。例如，兩個fetch相同變量的調(diào)用可能會相互覆蓋。

解決方案：確保狀態(tài)更新基於最新數(shù)據(jù)，或在需要時使用鎖定模式。

令A(yù)ppState = {data：null};

異步函數(shù)refreshdata（）{
  const響應(yīng)=等待fetch（'/api/最新'）;
  const newdata =等待響應(yīng)。 json（）;

  //僅當(dāng)此響應(yīng)打算是最新的時才更新
  //（如果需要，與序列或時間戳檢查結(jié)合）
  appstate.data = newdata;
}

如果多個異步函數(shù)可以突變appState ，請考慮使用狀態(tài)管理方法（例如還原器或靜音式護(hù)罩）序列化更新。

4。避免並發(fā)操作中的共享狀態(tài)

當(dāng)多個異步函數(shù)在沒有協(xié)調(diào)的情況下寫入同一變量時，種族條件是不可避免的。

最佳實踐：

• 使用不變的更新。
• 避免異步功能中的副作用。
• 使用狀態(tài)管理庫（例如，Redux，Zustand），可預(yù)測地處理訂購和更新。

另外，如果訂單很重要，則隊列操作：

 const queue = [];
讓IsProcessing = false;

異步函數(shù)inqueue（task）{
  queue.push（task）;
  如果（！iSPROCESSING）{
    processqueue（）;
  }
}

異步函數(shù)processqueue（）{
  IsProcessing = true;
  while（queue.length> 0）{
    const task = queue.shift（）;
    等待任務(wù)（）; //一次處理一個
  }
  IsProcessing = false;
}

這樣可以確保任務(wù)順序運(yùn)行並且不會干擾。

5。仔細(xì)地使用Promise.race()

Promise.race()有意返回第一個定居的諾言 - 是為比賽條件設(shè)計的。僅當(dāng)您真正想要最快的結(jié)果時才使用它。

但是，如果您需要所有結(jié)果或最後一個結(jié)果，請使用：

• Promise.all() - 等待所有人。
• Promise.allSettled() - 即使有些失敗，也要等待所有內(nèi)容。
• 避免Promise.race() ，除非種族是故意的。

處理比賽條件歸結(jié)為：

• 取消或忽略過時的操作
• 跟蹤請求訂單
• 避免不協(xié)調(diào)的狀態(tài)突變
• 使用適當(dāng)?shù)漠惒侥Ｊ?/li>

這並不總是要防止並發(fā) - 它是關(guān)於控制結(jié)果的應(yīng)用。

基本上：始終假設(shè)異步操作以無法預(yù)測的順序完成 - 相應(yīng)地計劃。

以上是如何在JavaScript中處理比賽條件的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！