JavaScript并發(fā)請求數(shù)據(jù)錯亂？有趣的競態(tài)問題

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

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

1. 競態(tài)問題的定義
2. 競態(tài)問題常見場景
3. 如何解決競態(tài)問題

競態(tài)問題的定義

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

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

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

舉個例子：

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

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

但由于網(wǎng)絡(luò)的不確定性，先發(fā)出的請求不一定先響應(yīng)，所以有可能 data3 比 data2 先返回；

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

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

競態(tài)問題常見場景

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

如何解決競態(tài)問題

解決競態(tài)問題，有兩種方法：

取消請求

XMLHTTPRequest，F(xiàn)etch，Axios都有提供取消的api可以調(diào)用。詳細可以自行查詢官網(wǎng)API說明。

忽略請求結(jié)果

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

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

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

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

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

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

代碼如下

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

/**
  * handleApiLimit 可控并發(fā)請求的函數(shù)
  * @params urls[] api
  * @params limit 并發(fā)數(shù)量 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數(shù)量24，打印如下

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

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

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

只需要：

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

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++) {
 // 發(fā)起請求
// 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 {
 // 將結(jié)束門減1，減到0時，就可以開啟結(jié)束門了
 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...");
 // 因開啟門只需一個開關(guān)，所以立馬就開啟開始門
 startGate.countDown();
 // 等等結(jié)束門開啟
 endGate.await();
 long endTime = System.nanoTime();
 System.out.println(endTime + " [" + Thread.currentThread() + "] All thread is completed.");
 return endTime - startTime;
 }
}

其執(zhí)行效果如下圖所示：

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

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

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

并發(fā)請求操作流程示意圖如下：

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

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

簡單看一下柵欄是如何實現(xiàn)真正同時并發(fā)呢？示例如下：

// 與 閉鎖 結(jié)構(gòu)一致
public class LatchTest {
 public static void main(String[] args) throws InterruptedException {
 Runnable taskTemp = new Runnable() {
 private int iCounter;
 @Override
 public void run() {
 // 發(fā)起請求
// 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 {
 // 設(shè)置柵欄解除時的動作，比如初始化某些值
 CyclicBarrier barrier = new CyclicBarrier(threadNums, finishTask);
 // 啟動 n 個線程，與柵欄閥值一致，即當線程準備數(shù)達到要求時，柵欄剛好開啟，從而達到統(tǒng)一控制效果
 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 {
 // 傳入柵欄，一般考慮更優(yōu)雅方式
 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 {
 // 設(shè)置柵欄，使在此等待，到達位置的線程達到要求即可開啟大門
 barrier.await();
 } catch (InterruptedException e) {
 e.printStackTrace();
 } catch (BrokenBarrierException e) {
 e.printStackTrace();
 }
 System.out.println(Thread.currentThread().getName() + " - " + System.currentTimeMillis() + " started...");
 }
}

其運行結(jié)果如下圖：

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

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

JavaScript并發(fā)請求數(shù)據(jù)錯亂？有趣的競態(tài)問題

競態(tài)問題的定義

競態(tài)問題常見場景

如何解決競態(tài)問題

您的項目需求