如何用 js 优雅的在前端实现循环多次向后端的 ajax 请求,且这些 ajax 是按顺序发起的

2017-04-06 21:29:24 +08:00
 abcbuzhiming
我现在有个这样的需求,前端页面要循环向服务器发起请求,一个请求结束后再发起下一次,直到循环条件结束。为的是缩短服务器每次处理数据时间,并及时的让客户端逐步看到处理结果,以前用 jquery 做,无非就两个方案: 1.aysnc 改成 false 变成同步请求, 2.递归调用,非常丑陋。现在弃用了 jquery ,用的 axios,这个库没法进行同步请求。那该怎么办,只有递归一条路了吗?
11634 次点击
所在节点    JavaScript
24 条回复
ChefIsAwesome
2017-04-06 21:45:54 +08:00
只能递归啊。丑不丑还不是看你写法
murmur
2017-04-06 21:47:18 +08:00
axios 本身基于 promise 你怎么让他同步 加了 async 写的好看但是还是要 babel
所以最简单的办法还是一开始就用 promise
kindjeff
2017-04-06 21:49:32 +08:00
这不叫递归啊~
murmur
2017-04-06 21:51:30 +08:00
对了,如果你会用英文搜索的话,你会发现有一种优雅的写法可以像 Promise.all 一样让一个数组的 promise 按顺序执行,而且不用自己串链子

问题是好像这个方法用的是 reduce 方法,一样需要 polyfill
binux
2017-04-06 21:52:17 +08:00
Promise
coderfox
2017-04-06 21:59:09 +08:00
let req = axois.request(...).then(业务逻辑).then( () => req );
req();

思路大概如此,或许有点小问题,自己试试。
billlee
2017-04-06 21:59:41 +08:00
alexsunxl
2017-04-06 22:34:26 +08:00
上 babel , async await
viko16
2017-04-06 22:43:06 +08:00
websocket 会不会是更好的方案?
golmic
2017-04-06 22:54:20 +08:00
对啊,我也觉得上 socket
Biwood
2017-04-06 22:58:55 +08:00
写聊天程序?长轮询?这个很常见吧,异步回调而已,不算递归,没有那么高大上
vghdjgh
2017-04-06 23:13:25 +08:00
1 、就用递归的写法(纯函数式语言的标准写法啊,不丑的)
即:每次只处理第一个 promise ,处理后把数组的其它部分作为新数组递归执行,直到全部完成
2 、 async/await
类似于:
```
async function main(promises) { // promises 是一个 promise 数组
let result = 0;
for(let promise of promises) {
result += await promise;
}
return result;
}
```
3 、和后端商量下用 websocket 推数据给你(现在轮询的方式很落后了吧)。
abcbuzhiming
2017-04-06 23:18:56 +08:00
@viko16 条件不允许上 websocket
abcbuzhiming
2017-04-06 23:19:42 +08:00
@vghdjgh
@coderfox
谢谢,正在研究改造成 promise ,环境暂时不允许用 async
shyling
2017-04-06 23:22:03 +08:00
Rx.Observable.from(...)
.flatMap(source => fetch(source), 1)
.subscrible()
lujiajing1126
2017-04-06 23:37:27 +08:00
支持#15

把 Promise 转成 Observable ,然后用 rxjs/repeatproto 来重复执行

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/repeatproto.md
otakustay
2017-04-06 23:43:14 +08:00
转 rx 是个办法但侵入性太强,其实你用 promise 或 callback 的话直接找个 async 库做下 series 封装就行了
http://caolan.github.io/async/
lkytal
2017-04-06 23:47:00 +08:00
async 库就解决了...
zbinlin
2017-04-06 23:56:02 +08:00
自荐一个类似的 async 库: https://www.npmjs.com/package/serial-async

:)
libook
2017-04-07 00:33:43 +08:00
这是一个流程控制库 https://caolan.github.io/async/index.html

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/353038

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX