FileEntry.file 是异步的！！！

背景：Angular4 

（用了ngx-file-drop插件，版本号是v3.0.2）

 

场景：允许用户从电脑中拖拽文件到浏览器中，实现文件上传操作，待上传完成，进行一个页面跳转的操作。

使用FileEntry.file(functionA)的方式获取上传的文件，并且在functionA中进行上传以及后续的跳转操作。

 

问题：FileEntry.file方法其实是异步方法，导致functionA中的后续操作，如果还有异步操作的话，会引起Angular的变更检测紊乱，准确的来说应该是变更检测不及时了，导致了一系列的问题，比如值的修改无法获取，以及router.navigate失效等。

fileEntry.file((file: File) => {
    console.log('Drag a file', file);
    // everything you want to do with this file
});

 

解决：使用Promise严格处理异步操作。

new Promise((resolve, reject) => fileEntry.file(resolve, reject)).then(file => {
    console.log('Drag a file', file);
    // everything you want to do with this file
});

 

心得：一是忽视了FileEntry.file()方法是异步方法。二是在Angular中（包括AngularJS，2，4等等）一定要好好使用Promise来处理异步操作。目前遇到几个棘手的问题都是没有合理地使用Promise。

 

其他场景：Promise也可以用来实现多重的嵌套Promise，比如先获取token，拿到token之后获取商品，拿到商品之后获取商品交易记录。类似这种Promise chain，通过new Promise().then()是可以完美的实现这种功能的。