考虑下面以串行/顺序方式读取文件数组的代码。readFiles返回一个承诺，只有在顺序读取所有文件后才会解析这个承诺。
var readFile = function(file) {
... // Returns a promise.
};
var readFiles = function(files) {
return new Promise((resolve, reject) => {
var readSequential = function(index) {
if (index >= files.length) {
resolve();
} else {
readFile(files[index]).then(function() {
readSequential(index + 1);
}).catch(reject);
}
};
readSequential(0); // Start with the first file!
});
};
上面的代码可以工作，但是我不喜欢为了使事情按顺序发生而进行递归。是否有一种更简单的方法可以重写这段代码，这样我就不必使用奇怪的readSequential函数了?
最初我尝试使用Promise。但是这会导致所有的readFile调用并发发生，这不是我想要的:
var readFiles = function(files) {
return Promise.all(files.map(function(file) {
return readFile(file);
}));
};
下面是我的Angular/TypeScript方法，使用RxJS:
给定一个URL字符串数组，使用from函数将其转换为一个可观察对象。
使用管道包装Ajax请求、即时响应逻辑、任何所需的延迟和错误处理。
在管道内部，使用concatMap序列化请求。否则，使用Javascript forEach或map会同时发出请求。
使用RxJS ajax进行调用，并在每次调用返回后添加所需的延迟。
工作示例:https://stackblitz.com/edit/rxjs-bnrkix?file=index.ts
代码看起来像这样(我留下了一些额外的内容，这样你可以选择保留或丢弃什么):
import { ajax } from 'rxjs/ajax';
import { catchError, concatMap, delay, from, of, map, Observable } from 'rxjs';
const urls = [
'https://randomuser.me/api/',
'https://randomuser.me/api/',
'https://randomuser.me/api/',
];
const delayAfterCall = 500;
from(urls)
.pipe(
concatMap((url: string) => {
return ajax.getJSON(url).pipe(
map((response) => {
console.log('Done! Received:', response);
return response;
}),
catchError((error) => {
console.error('Error: ', error);
return of(error);
}),
delay(delayAfterCall)
);
})
)
.subscribe((response) => {
console.log('received email:', response.results[0].email);
});
这是对如何以更通用的方式处理承诺序列的扩展，支持基于spex的动态/无限序列。序列实现:
var $q = require("q");
var spex = require('spex')($q);
var files = []; // any dynamic source of files;
var readFile = function (file) {
// returns a promise;
};
function source(index) {
if (index < files.length) {
return readFile(files[index]);
}
}
function dest(index, data) {
// data = resolved data from readFile;
}
spex.sequence(source, dest)
.then(function (data) {
// finished the sequence;
})
.catch(function (error) {
// error;
});
这种解决方案不仅适用于任何大小的序列，而且还可以轻松地向其添加数据节流和负载平衡。
如果你愿意，你可以用reduce来做出一个连续的承诺，例如:
[2,3,4,5,6,7,8,9].reduce((promises, page) => {
return promises.then((page) => {
console.log(page);
return Promise.resolve(page+1);
});
}, Promise.resolve(1));
它总是按顺序工作。
使用Async/Await(如果你有ES7的支持)
function downloadFile(fileUrl) { ... } // This function return a Promise
async function main()
{
var filesList = [...];
for (const file of filesList) {
await downloadFile(file);
}
}
(你必须使用for循环，而不是forEach，因为async/await在forEach循环中运行有问题)
没有Async/Await(使用Promise)
function downloadFile(fileUrl) { ... } // This function return a Promise
function downloadRecursion(filesList, index)
{
index = index || 0;
if (index < filesList.length)
{
downloadFile(filesList[index]).then(function()
{
index++;
downloadRecursion(filesList, index); // self invocation - recursion!
});
}
else
{
return Promise.resolve();
}
}
function main()
{
var filesList = [...];
downloadRecursion(filesList);
}
(function() {
function sleep(ms) {
return new Promise(function(resolve) {
setTimeout(function() {
return resolve();
}, ms);
});
}
function serial(arr, index, results) {
if (index == arr.length) {
return Promise.resolve(results);
}
return new Promise(function(resolve, reject) {
if (!index) {
index = 0;
results = [];
}
return arr[index]()
.then(function(d) {
return resolve(d);
})
.catch(function(err) {
return reject(err);
});
})
.then(function(result) {
console.log("here");
results.push(result);
return serial(arr, index + 1, results);
})
.catch(function(err) {
throw err;
});
}
const a = [5000, 5000, 5000];
serial(a.map(x => () => sleep(x)));
})();
这里的关键是如何调用sleep函数。你需要传递一个函数数组，它本身返回一个promise，而不是一个promise数组。
