直到 Promise 完成其工作后，代码才会执行

Question

我的这个问题可能与角度概念无关。但我在角度的背景下遇到它。我点击 Angular 模板中的一个按钮，它会触发 onSubmit 函数。

scanFiles 是一个长时间运行的函数，它返回一个承诺。我希望 console.log("test1") 在长时间运行的功能启动之前打印出来。但这不会发生。它仅在长时间运行功能完成后打印出来。为什么会这样？

    onSubmit(){

        this.scanFiles(this.foldersPath).then((filesPath)=>{
                 //after scan finish 

        })
         .catch((err)=>console.log(err))

        console.log("test1")

    }

2019 年 10 月 7 日进一步更新）

如下所示，我的 scanFiles 函数返回了一个承诺。因此，无论我的 promise 作业做什么，理论上，我认为应该在浏览器开始执行 promise 作业之前打印出“test1”。

scanFiles(foldersPath: any):Promise<string[]> {
        return new Promise(
            (resolveFn, rejectFn)=>{
                try{

                    const scanResult:string[]= foldersPath.reduce(
                        (prevFolderPath:string[], currFolderPath:string)=> {
                            let files:string[] =  this.fileService.getContentInDirectory (currFolderPath, this.filter.bind(this), this.getProcessDirectoryContentFn(), this.subfolderDepthInput)
                            prevFolderPath.push(...files)
                            return prevFolderPath

                        },new Array<string>())
                    console.log(scanResult)
                    resolveFn(scanResult)
                }
                catch(e){
                    console.log(e)
                    rejectFn(e)
                }
            }
        )
``

2019 年 10 月 8 日更新 geContentInDirectory里面有一个readdirSync()函数

getContentInDirectory(dir:string, filterContentFn?:(fullPath:string)=>boolean, processContentFn?:(fullPath:any)=>string, maxSubFolderDepth?:number ): string[]{

        let paths:string[]=[];

        //const dir_NOT_A_DIRECTORY = 
        if(!dir || !fs.lstatSync(dir).isDirectory()) 
            throw new Error("First Parameter must be a directory")

        fs.readdirSync(dir).forEach(entityName=>{
            let fullPath:string = path.join(dir, entityName)
            let isFile = fs.lstatSync(fullPath).isFile()

            if(maxSubFolderDepth==undefined || maxSubFolderDepth >= 0){
                if(isFile){
                    if(filterContentFn) {
                        if(filterContentFn(fullPath)){
                            let content = processContentFn? processContentFn(fullPath): fullPath
                            paths.push(content)
                        }            
                    }
                }
                else {
                    const depth = maxSubFolderDepth==undefined ? undefined: maxSubFolderDepth-1
                    paths.push(...this.getContentInDirectory(fullPath, filterContentFn, processContentFn, depth))
                }
            }
        })
        return paths;

    }
}

2019 年 10 月 8 日更新

我通过这样重写我的代码做了一个实验： 结果是“test0”，“test2”，“test1”依次打印出来。

结论：当 Promise 对象被创建时，它在 Promise 对象中定义的长期运行的作业将被立即触发并执行。 一旦我的 scanFiles 完成了它的工作，“test0”就会被打印出来。

然后在 promise 的 then 函数中注册（注册但尚未执行）回调。然后打印test2"。线程会回到它的事件循环，发现它仍然需要处理回调函数，导致打印"test1"

let p= this.scanFiles(this.foldersPath)
console.log("test0")
p.then((filesPath)=>{
  console.log("test1")
 })
 .catch((err)=>console.log(err))

 console.log("test2")

感谢 Tomalak 用户的解决方案和解释，这导致了我的上述理解。

回答我的问题：我的 Promise 对象内部包含同步任务。难怪我的“test1”（参考我最上面的代码）只有在promise对象中的任务完成后才会打印出来。

Answer 1

就我对您当前代码的理解而言，这是您的getContentInDirectory 的完全异步、返回承诺的版本。为了测试，我发现 TypeScript 太吵了，把它删了，你觉得合适就加回来。

function getContentInDirectory(dir, filterContentFn, processContentFn, maxSubFolderDepth) {
    return new Promise((resolve, reject) => {
        let result = [], pending = 0;
        function worker(currPath, depth) {
            pending++;
            fs.lstat(currPath, (err, stat) => {
                pending--;
                if (err) return reject(err);
                if (stat.isDirectory()) {
                    if (depth >= 0) {
                        pending++;
                        fs.readdir(currPath, (err, children) => {
                            pending--;
                            if (err) return reject(err);
                            children.forEach(name => worker(path.join(currPath, name), depth - 1));
                        });
                    }
                } else if (!filterContentFn || filterContentFn(currPath)) {
                    result.push(processContentFn ? processContentFn(currPath) : currPath);
                }
                if (!pending) resolve(result);
            });
        }
        worker(dir, maxSubFolderDepth >= 0 ? maxSubFolderDepth : Infinity);
    });
}

有不同的方法来实现这一点，包括使用fs Promises API，它从节点版本 10 开始可用，但至今仍标记为“实验性”。以上没有任何假设，适用于任何节点版本。

现在您可以本着以下精神在scanFiles 中使用它：

function scanFiles(foldersPath) {
    let pendingPaths = foldersPath.map(currFolderPath => {
        return getContentInDirectory(currFolderPath, filterFunc, processFunc, depth);
    });
    return Promise.all(pendingPaths).then(results => {
        return Array.prototype.concat.apply([], results);  // flatten
    });
}

最后在您的事件处理程序中：

onSubmit(){
    this.scanFiles(this.foldersPath).then(filesPath => {
        // after scan finish 
        console.log("this prints last");
    })
    .catch(err => console.log(err));
    console.log("this prints first");
}

这里要注意的是，执行实际工作的函数从一开始就需要是异步的，如果您想成为您的消费函数也是异步的。从 node 的 fs 函数的“同步”版本切换到常规的异步版本是至关重要的一步。

当然，这种变化意味着你程序中getContentInDirectory 的每个使用者都必须更改为异步代码。

Answer 2

您可以使用多个 Then 链接在一起：

new Promise(function(resolve, reject) {

  setTimeout(() => resolve(1), 1000); // (*)

}).then(function(result) { // (**)

  alert(result); // 1
  return result * 2;

}).then(function(result) { // (***)

  alert(result); // 2
  return result * 2;

}).then(function(result) {

  alert(result); // 4
  return result * 2;

});

这个想法是通过 .then 处理程序链传递结果。

这里的流程是：

初始承诺在 1 秒内解决 ()， 然后调用 .then 处理程序 ()。 它返回的值被传递给下一个 .then 处理程序 () ……等等。

链接Promises chaining

或者你可以在执行完之后做一些事情，通过在 finally 中写入：

let isLoading = true;

fetch(myRequest).then(function(response) {
    var contentType = response.headers.get("content-type");
    if(contentType && contentType.includes("application/json")) {
      return response.json();
    }
    throw new TypeError("Oops, we haven't got JSON!");
  })
  .then(function(json) { /* process your JSON further */ })
  .catch(function(error) { console.error(error); /* this line can also throw, e.g. when console = {} */ })
  .finally(function() { isLoading = false; });