JavaScript并發請求數據錯亂？有趣的競態問題

你講個故事，有個朋友在某App上搜索附近的餐館，剛開始搜索“粵菜館”，但他突然想起老婆想吃辣的，改變了主意迅速搜索“湘菜館”，他希望是展示“湘菜館”的附近推薦，但是意外的卻返回了“粵菜館”的結果，老婆看到了后，說他不把自己放在心上！從此他狠狠的卸載告別了這款App！這是競態問題引發的冤案。

兩個請求，在相隔時間較短時同時發出，由于網絡請求快慢的不確定性，無法保證兩個請求的返回順序，和請求先后順序一致，這就會出現上面的場景，這便是有趣的競態問題。今天和大家分享下面三個方面：

1. 競態問題的定義
2. 競態問題常見場景
3. 如何解決競態問題

競態問題的定義

下面是取自維基百科的描述

競態問題，也叫競態條件(Race Condition)，是指一個系統或進程的輸出依賴于不受控制的事件出現順序或出現時機。
此詞源自于兩個信號試著彼此競爭，來影響誰先輸出。

簡單來說，競態問題出現的原因是無法保證異步操作的完成會按照他們開始時同樣的順序。

舉個例子：

有一個分頁列表，快速地切換第二頁，第三頁；

先后請求 data2 與 data3，分頁器顯示當前在第三頁，并且進入 loading；

但由于網絡的不確定性，先發出的請求不一定先響應，所以有可能 data3 比 data2 先返回；

在 data2 最終返回后，分頁器指示當前在第三頁，但展示的是第二頁的數據。

這也就是開頭的故事，最后搜索的是“湘菜館”，但展示的卻是“粵菜館”信息。這便是有趣的競態問題。

競態問題常見場景

在前端開發中，常見于搜索，分頁，選項卡等切換的場景。這些場景的特征是，用戶可以快速觸發請求，導致請求并發。

如何解決競態問題

解決競態問題，有兩種方法：

取消請求

XMLHTTPRequest，Fetch，Axios都有提供取消的api可以調用。詳細可以自行查詢官網API說明。

忽略請求結果

一種場景是使用Promise，可以進行封裝，當生成新的promise時，調用上一個promise的取消方法。

另一種是使用唯一id，每次新請求是id+1，在請求時記錄一個id，返回時對比當前最新的id是否和請求時id一樣，不一樣則忽略。

有個特殊場景需要注意，服務器對于請求是否有副作用？如在后臺接收到請求后，在后臺會話信息寫入了參數相關信息，在下一個其他請求時校驗一致性。這種情況下，因無法保證并發請求哪個先到服務器，所以會導致下一個請求一致性校驗可能失敗。這時就需要避免競態問題，在界面發起一個請求后，判斷只有等上一次請求成功，才能新發起請求。

以上就是今天分享的內容，希望能對你有所幫助。

互相學習，共同成長，喜歡的朋友可以點贊收藏加關注哦！

常開發中會經常遇見在一個模塊尤其是可視化模塊中多次調用多個api請求數據，而同一時間的大量api請求會造成服務器壓力變大，穩定性變差，尤其是用戶量很大的時候，這種影響會更突出。處理并發問題，后端一般會合并業務接口減少api調用，我們前端一般會配合進行優化，無非就是根據api優先級依次調用，減少同一時間的api調用。因此封裝一個可控并發數的工具函數就比較重要了。

代碼如下

//延遲函數
const p = (n)=> {
  return new Promise((res)=>{
    const t = (Math.random()*4000).toFixed(3)
    setTimeout(() => {
      console.log('/requestcallback.html [259]--1','t',t);
      res({t,n})
    },t);
  })
}

//使用fetch
//接口請求的函數
async function request(url) {
  //模擬各個接口響應時間，延遲執行api
  //真實場景中可以注釋該代碼，或者寫死延遲時間，比如50ms
  await p(url)
  return fetch(url,{
    method:'GET'
  }).then( async(res)=> {
    
    const data = await res.json()
    return {
      data: data.data
    }
  })
}

/**
  * handleApiLimit 可控并發請求的函數
  * @params urls[] api
  * @params limit 并發數量 default 2
  * return [...data]
  */
async function handleApiLimit(urls,limit=2) {
  let result=[],start=0,end=limit,length=urls.length;
  if(limit>length) {
    end = length
  }
  while(start<length-1) {
    let apis = [...urls.slice(start,end)].map(api=>request(api))
    console.log('/requestcallback.html [323]--1','start,end',start,end);
    const res = await Promise.all(apis)
    console.log('/requestcallback.html [325]--1','res',res);
    start=end
    end+=limit
    result.push(...res)
  }
  return result
}

測試apis數量24，打印如下

作者：等你歸去來
來源：https://www.cnblogs.com/yougewe/p/9745198.html

時需要測試一下某個功能的并發性能，又不要想借助于其他工具，索性就自己的開發語言，來一個并發請求就最方便了。

java中模擬并發請求，自然是很方便的，只要多開幾個線程，發起請求就好了。但是，這種請求，一般會存在啟動的先后順序了，算不得真正的同時并發！怎么樣才能做到真正的同時并發呢？是本文想說的點，java中提供了閉鎖 CountDownLatch, 剛好就用來做這種事就最合適了。

只需要：

開啟n個線程，加一個閉鎖，開啟所有線程；
待所有線程都準備好后，按下開啟按鈕，就可以真正的發起并發請求了。

package com.test;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.concurrent.CountDownLatch;
public class LatchTest {
 public static void main(String[] args) throws InterruptedException {
 Runnable taskTemp = new Runnable() {
　　　　　　　// 注意，此處是非線程安全的，留坑
 private int iCounter;
 @Override
 public void run() {
 for(int i = 0; i < 10; i++) {
 // 發起請求
// HttpClientOp.doGet("https://www.baidu.com/");
 iCounter++;
 System.out.println(System.nanoTime() + " [" + Thread.currentThread().getName() + "] iCounter = " + iCounter);
 try {
 Thread.sleep(100);
 } catch (InterruptedException e) {
 e.printStackTrace();
 }
 }
 }
 };
 LatchTest latchTest = new LatchTest();
 latchTest.startTaskAllInOnce(5, taskTemp);
 }
 public long startTaskAllInOnce(int threadNums, final Runnable task) throws InterruptedException {
 final CountDownLatch startGate = new CountDownLatch(1);
 final CountDownLatch endGate = new CountDownLatch(threadNums);
 for(int i = 0; i < threadNums; i++) {
 Thread t = new Thread() {
 public void run() {
 try {
 // 使線程在此等待，當開始門打開時，一起涌入門中
 startGate.await();
 try {
 task.run();
 } finally {
 // 將結束門減1，減到0時，就可以開啟結束門了
 endGate.countDown();
 }
 } catch (InterruptedException ie) {
 ie.printStackTrace();
 }
 }
 };
 t.start();
 }
 long startTime = System.nanoTime();
 System.out.println(startTime + " [" + Thread.currentThread() + "] All thread is ready, concurrent going...");
 // 因開啟門只需一個開關，所以立馬就開啟開始門
 startGate.countDown();
 // 等等結束門開啟
 endGate.await();
 long endTime = System.nanoTime();
 System.out.println(endTime + " [" + Thread.currentThread() + "] All thread is completed.");
 return endTime - startTime;
 }
}

其執行效果如下圖所示：

httpClientOp 工具類，可以使用成熟的工具包，也可以自己寫一個簡要的訪問方法，參考如下：

class HttpClientOp {
 public static String doGet(String httpurl) {
 HttpURLConnection connection = null;
 InputStream is = null;
 BufferedReader br = null;
 String result = null;// 返回結果字符串
 try {
 // 創建遠程url連接對象
 URL url = new URL(httpurl);
 // 通過遠程url連接對象打開一個連接，強轉成httpURLConnection類
 connection = (HttpURLConnection) url.openConnection();
 // 設置連接方式：get
 connection.setRequestMethod("GET");
 // 設置連接主機服務器的超時時間：15000毫秒
 connection.setConnectTimeout(15000);
 // 設置讀取遠程返回的數據時間：60000毫秒
 connection.setReadTimeout(60000);
 // 發送請求
 connection.connect();
 // 通過connection連接，獲取輸入流
 if (connection.getResponseCode() == 200) {
 is = connection.getInputStream();
 // 封裝輸入流is，并指定字符集
 br = new BufferedReader(new InputStreamReader(is, "UTF-8"));
 // 存放數據
 StringBuffer sbf = new StringBuffer();
 String temp = null;
 while ((temp = br.readLine()) != null) {
 sbf.append(temp);
 sbf.append("\r\n");
 }
 result = sbf.toString();
 }
 } catch (MalformedURLException e) {
 e.printStackTrace();
 } catch (IOException e) {
 e.printStackTrace();
 } finally {
 // 關閉資源
 if (null != br) {
 try {
 br.close();
 } catch (IOException e) {
 e.printStackTrace();
 }
 }
 if (null != is) {
 try {
 is.close();
 } catch (IOException e) {
 e.printStackTrace();
 }
 }
 connection.disconnect();// 關閉遠程連接
 }
 return result;
 }
 public static String doPost(String httpUrl, String param) {
 HttpURLConnection connection = null;
 InputStream is = null;
 OutputStream os = null;
 BufferedReader br = null;
 String result = null;
 try {
 URL url = new URL(httpUrl);
 // 通過遠程url連接對象打開連接
 connection = (HttpURLConnection) url.openConnection();
 // 設置連接請求方式
 connection.setRequestMethod("POST");
 // 設置連接主機服務器超時時間：15000毫秒
 connection.setConnectTimeout(15000);
 // 設置讀取主機服務器返回數據超時時間：60000毫秒
 connection.setReadTimeout(60000);
 // 默認值為：false，當向遠程服務器傳送數據/寫數據時，需要設置為true
 connection.setDoOutput(true);
 // 默認值為：true，當前向遠程服務讀取數據時，設置為true，該參數可有可無
 connection.setDoInput(true);
 // 設置傳入參數的格式:請求參數應該是 name1=value1&name2=value2 的形式。
 connection.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
 // 設置鑒權信息：Authorization: Bearer da3efcbf-0845-4fe3-8aba-ee040be542c0
 connection.setRequestProperty("Authorization", "Bearer da3efcbf-0845-4fe3-8aba-ee040be542c0");
 // 通過連接對象獲取一個輸出流
 os = connection.getOutputStream();
 // 通過輸出流對象將參數寫出去/傳輸出去,它是通過字節數組寫出的
 os.write(param.getBytes());
 // 通過連接對象獲取一個輸入流，向遠程讀取
 if (connection.getResponseCode() == 200) {
 is = connection.getInputStream();
 // 對輸入流對象進行包裝:charset根據工作項目組的要求來設置
 br = new BufferedReader(new InputStreamReader(is, "UTF-8"));
 StringBuffer sbf = new StringBuffer();
 String temp = null;
 // 循環遍歷一行一行讀取數據
 while ((temp = br.readLine()) != null) {
 sbf.append(temp);
 sbf.append("\r\n");
 }
 result = sbf.toString();
 }
 } catch (MalformedURLException e) {
 e.printStackTrace();
 } catch (IOException e) {
 e.printStackTrace();
 } finally {
 // 關閉資源
 if (null != br) {
 try {
 br.close();
 } catch (IOException e) {
 e.printStackTrace();
 }
 }
 if (null != os) {
 try {
 os.close();
 } catch (IOException e) {
 e.printStackTrace();
 }
 }
 if (null != is) {
 try {
 is.close();
 } catch (IOException e) {
 e.printStackTrace();
 }
 }
 // 斷開與遠程地址url的連接
 connection.disconnect();
 }
 return result;
 }
}

如上，就可以發起真正的并發請求了。

并發請求操作流程示意圖如下：

此處設置了一道門，以保證所有線程可以同時生效。但是，此處的同時啟動，也只是語言層面的東西，也并非絕對的同時并發。具體的調用還要依賴于CPU個數，線程數及操作系統的線程調度功能等，不過咱們也無需糾結于這些了，重點在于理解原理！

與 CountDownLatch 有類似功能的，還有個工具柵欄 CyclicBarrier, 也是提供一個等待所有線程到達某一點后，再一起開始某個動作，效果一致，不過柵欄的目的確實比較純粹，就是等待所有線程到達，而前面說的閉鎖 CountDownLatch 雖然實現的也是所有線程到達后再開始，但是他的觸發點其實是最后那一個開關，所以側重點是不一樣的。

簡單看一下柵欄是如何實現真正同時并發呢？示例如下：

// 與 閉鎖 結構一致
public class LatchTest {
 public static void main(String[] args) throws InterruptedException {
 Runnable taskTemp = new Runnable() {
 private int iCounter;
 @Override
 public void run() {
 // 發起請求
// HttpClientOp.doGet("https://www.baidu.com/");
 iCounter++;
 System.out.println(System.nanoTime() + " [" + Thread.currentThread().getName() + "] iCounter = " + iCounter);
 }
 };
 LatchTest latchTest = new LatchTest();
// latchTest.startTaskAllInOnce(5, taskTemp);
 latchTest.startNThreadsByBarrier(5, taskTemp);
 }
 public void startNThreadsByBarrier(int threadNums, Runnable finishTask) throws InterruptedException {
 // 設置柵欄解除時的動作，比如初始化某些值
 CyclicBarrier barrier = new CyclicBarrier(threadNums, finishTask);
 // 啟動 n 個線程，與柵欄閥值一致，即當線程準備數達到要求時，柵欄剛好開啟，從而達到統一控制效果
 for (int i = 0; i < threadNums; i++) {
 Thread.sleep(100);
 new Thread(new CounterTask(barrier)).start();
 }
 System.out.println(Thread.currentThread().getName() + " out over...");
 }
}
class CounterTask implements Runnable {
 // 傳入柵欄，一般考慮更優雅方式
 private CyclicBarrier barrier;
 public CounterTask(final CyclicBarrier barrier) {
 this.barrier = barrier;
 }
 public void run() {
 System.out.println(Thread.currentThread().getName() + " - " + System.currentTimeMillis() + " is ready...");
 try {
 // 設置柵欄，使在此等待，到達位置的線程達到要求即可開啟大門
 barrier.await();
 } catch (InterruptedException e) {
 e.printStackTrace();
 } catch (BrokenBarrierException e) {
 e.printStackTrace();
 }
 System.out.println(Thread.currentThread().getName() + " - " + System.currentTimeMillis() + " started...");
 }
}

其運行結果如下圖：

各有其應用場景吧，關鍵在于需求。就本文示例的需求來說，個人更愿意用閉鎖一點，因為更可控了。但是代碼卻是多了，所以看你喜歡吧！

在線咨詢

上一篇：0基礎學HTML5程序設計，自己也能成為大神，最全HTML5教程來啦
下一篇：技術貼：一篇文章看懂鏈接（超鏈接）設計

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript并發請求數據錯亂？有趣的競態問題

競態問題的定義

競態問題常見場景

如何解決競態問題

您的項目需求