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并发请求数据错乱？有趣的竞态问题

竞态问题的定义

竞态问题常见场景

如何解决竞态问题

您的项目需求