并发请求和链式请求

并发请求和链式请求

xiaoxiaoxuan11

2023 年 06 月 07 日

304 次浏览

暂无评论

3782字数

前端部分

## 撸起袖子前先知道概念
* 并发请求： 同一时间发送多个请求
* 链式请求： 前一个发送完请求后发送下一个请求

## 代码实例

### 并发请求

先看代码吧

```js
function ajax(url) {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "json";
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.send();
  });
}

function running () {
  ajax(url1)
    .then(......)
    .catch(......)
  ajax(url2)
    .then(......)
    .catch(......)
  ajax(url3)
    .then(......)
    .catch(......)
  ......
}

running()
```

`ajax`内含Promise异步操作，所以说会同时发送 `url1`、`url2`、`url3`

### 链式请求
还是一样，先看代码吧
```js
function ajax(url) {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "json";
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.send();
  });
}

// 反面教材
function running () {
  ajax(url1)
    .then(() => {
	  ajax(url2)
	    .then(() => {
		  ajax(url3)
		    .then(......)
		})
	})
}

running()

```
当第一个`ajax`执行成功后再调用第二个`ajax`，依次调用(~~感觉有点像递归~~)，不过写的时候要注意了，不要想我这样写。
ㄟ( ▔, ▔ )ㄏ

#### 改进写法
* 写法1: 通过`ES2017`的`async/await`将异步转同步

function async running () {
  await ajax(url1)
    .then(......)
    .catch(......)
  await ajax(url2)
    .then(......)
    .catch(......)
  await ajax(url3)
    .then(......)
    .catch(......)
  ......
}

running()
```

* 写法2：在不考虑异常处理时候，在`then`里面`return`

function running () {
  ajax(url1)
    .then(() => {
	  ......
	  return ajax(url2)
	})
    .then(() => {
	  ......
	  return ajax(url3)
	})
  ......
}

running()
```

* 写法三：**不推荐**，设置callback执行数组进行递归

不推荐原因在于每个请求处理逻辑不一样，这样不能保证每个请求逻辑处理。额外添加处理的参数会使得函数臃肿。

function running ([first, ...args]) {
  if (!first) return
  first
    .then(() => {
      ......
    })
    .catch(() => {
	  ......
	})
	.finally(() => {
	  running(args)
	})
}

running()
```

## 优劣(关于请求)
|      | 并发请求                                                     | 链式请求                                                     |
| ---- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| 优点 | 1、允许网页加载多个请求，减少数据加载时间<br/>2、单个请求异常不会影响后续操作 | 1、单一请求会缓解服务器负担                                  |
| 缺点 | 1、增加服务器负担                                            | 1、会增加所有数据加载时间<br />2、单个请求失败后需要处理才能请求下一个(比如说`Async`,`Await`) |

并发请求和链式请求