Vue - Promise （回调地狱）

Promise 是 ES6 中的构造函数，可以 new Promise()

new 出来的 Promise 实例对象，代表一个异步操作

 

在 Promise.prototype 上包含一个 .then() 方法，每一次 new Promise() 构造函数得到的实例对象，都可以 通过原型链的方式访问到 .then() 方法，例如 p.then()

 在 Chrome 浏览器的命令模式下，可以输入 

console.dir(Promise)

 

 

.then() 方法用来预先指定成功和失败的回调函数

p.then(成功的回调函数，失败的回调函数）

p.then(result =>{ }, error => { })

 

调用 .then() 方法时，成功的回调函数是必选的，失败的回调函数是可选的。

/*
 *  基于 Promise 的方式读取文件
 */

import thenFs from "then-fs";

/*
thenFs.readFile('./files/1.txt','utf8').then(r1 => {console.log(r1)}, err1 =>{console.log(err1.message)})
thenFs.readFile('./files/2.txt','utf8').then(r2 => {console.log(r2)}, err2 =>{console.log(err2.message)})
thenFs.readFile('./files/3.txt','utf8').then(r3 => {console.log(r3)}, err3 =>{console.log(err3.message)})
*/

// 上述代码不能保证读取顺序，接下来加以改进

thenFs.readFile('./files/1.txt','utf8')
    .catch(err =>{
        console.log(err.message)        
    })
    .then((r1) => {
        console.log(r1)
        return thenFs.readFile('./files/21.txt','utf8')
    })
    .catch(err =>{
        console.log(err.message)        
    })
    .then((r2)=>{
        console.log(r2)
        return thenFs.readFile('./files/3.txt','utf8')
    })
    .catch(err =>{
        console.log(err.message)        
    })
    .then((r3)=>{
        console.log(r3)
    })
    .catch(err =>{
        console.log(err.message)        
    })

这个读文件的例子有待改进，我们接下来学习 Promise.all  等方法

 在下面这个代码里，顺序是固定的，三个函数都必须执行后，才会输出结果

const promiseArr = [
    thenFs.readFile('./files/1.txt','utf8'),
    thenFs.readFile('./files/2.txt','utf8'),
    thenFs.readFile('./files/3.txt','utf8')
]

Promise.all(promiseArr)
    .then(([r1,r2,r3]) =>{
        console.log(r1,r2,r3)
    })
    .catch(err=>{
        console.log(err.message)
    })

Promise.race(promiseArr)
    .then((result) =>{
        console.log(result)
    })
    .catch(err=>{
        console.log(err.message)
    })

而使用 race 时，只要其中一个函数执行完成，就开始 then 操作，也就只有一个结果输出

可以对读文件的操作进行封装，如下所示：

function getFile(fpath){
    return new Promise(function(resole,reject){
        fs.readFile(fpath,'utf8',(err,dataStr)=>{
                if(err)
                    return reject(err);
                return resole(dataStr);
        })
    })
}

getFile('./files/21.txt').then(
    (r1) => {console.log(r1)},
    (err) => {console.log(err.message)} // 这个可以省略，靠 catch 来捕获异常也可以
).catch(err=>{console.log(err)});