ES6--Promise

Promise的引出

封装node方法，传入文件路径，可以读取文件并将内容返回

const fs = require('fs')
const path = require('path')

//封装函数
function getFileByPath(fpath) {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {
        if (err) throw err
        return dataStr
    })

}

//readFile为异步处理函数，放到队列里继续运行主程序，直接跳到第10行代码。函数执行发现没有return，默认返回undefined，所以上述函数运行结果都是undefined

var data = getFileByPath(path.join(__dirname, './files/1.txt'))
console.log(data)　　//undefined

所以上述方法不能拿到文件的数据，进一步改造函数，使用回调：

function getFileByPath(fpath, callback) {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {
        if (err) throw err
        callback(dataStr)
    })
}

getFileByPath(path.join(__dirname, './files/1.txt'), (data) => {
    console.log(data)
})

上面函数，如果传入的文件类型不正确就不能执行后面的代码，可以将文件路径错误时的处理再进一步优化，将错误结果也进行返回

//将错误结果也进行返回，并规定成功的结果位于回调函数的第二个位置，失败的结果位于回调函数的第一个位置
function getFileByPath(fpath, callback) {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {
        if (err) return callback(err)
        callback(null, dataStr)
    })
}

getFileByPath(path.join(__dirname, './files/1.txt'), (err, data) => {
    if (err) {
        console.log(err.message)
    } else {
        console.log(data)
    }
})

回调函数将成功与失败的结果都在一起处理进行优化，将两种结果分成两个回调函数

function getFileByPath(fpath, succCb, errCb) {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {
        if (err) return errCb(err)
        succCb(dataStr)
    })
}

getFileByPath(path.join(__dirname, './files/11.txt'), data => {
    console.log('成功的结果为' + data)
}, err => {
    console.log('失败的结果' + err.message)
})

如果有一个需求为，先读取文件1，再读取文件2，最后再读取文件3，调用函数如下

getFileByPath(path.join(__dirname, './files/1.txt'), data => {
    console.log(data)

    getFileByPath(path.join(__dirname, './files/2.txt'), data => {
        console.log(data)

        getFileByPath(path.join(__dirname, './files/3.txt'), data => {
            console.log(data)
        })
    })
})

这种函数作为参数层层嵌套称为回调地狱

使用es6中的Promise来解决回调地狱的问题（使用Promise并不会减少代码量，只是将多层的嵌套改成了代码串联的形式）

Promise概念

1、promise是一个构造函数，可以通过new创建实例

2、在Promise上有两个函数，resolve（成功之后的回调函数）和reject（失败之后的回调函数）

3、在Promise构造函数的prototype属性上，有then方法。通过Promise创造的实例都可以使用then方法

4、每一个Promise实例表示一个异步操作

5、通过then方法指定回调函数时，成功的回调函数必须传，失败的回调函数可以不传

6、Promise实例只要被创建，就会立即执行里面的异步方法

var promise = new Promise(function () {
    fs.readFile(path.join(__dirname, './files/2.txt'), 'utf-8', (err, dataStr) => {
        if (err) throw err;
        console.log(dataStr)
    })
})
//node运行后，会打印出文件内容，说明异步函数被执行
//也就是说，在使用new关键字后，除了得到Promise实例，还会立即调用我们为Promise构造函数传递的function，执行function中的异步操作代码

如果不想使函数在调用时才执行，可以将Promise包裹在另一个函数中

function getFileByPath(fpath) {
    var promise = new Promise(function () {
        fs.readFile(fpath, 'utf-8', (err, dataStr) => {
            if (err) throw err;
            console.log(dataStr)
        })
    })
}

getFileByPath(path.join(__dirname, './files/2.txt'))

 如果想获得文件读取的结果，直接在readFile中return会像之前函数封装一样，因为异步操作并不能拿到结果，所以需要借助回调函数。Promise为我们提供了成功回调resolve与失败回调reject，在new Promise的函数参数中，传入resolve与reject，代码如下

function getFileByPath(fpath) {
    var promise = new Promise(function (resolve, reject) {
        fs.readFile(fpath, 'utf-8', (err, dataStr) => {
            if (err) return reject(err);
            resolve(dataStr)
        })
    })
}
//resolve与reject为形参

通过then方法可以指定成功和失败的回调，需要通过Promise的实例调用方法，所以需要将上面函数中的promise返回

function getFileByPath(fpath) {
    var promise = new Promise(function (resolve, reject) {
        fs.readFile(fpath, 'utf-8', (err, dataStr) => {
            if (err) return reject(err);
            resolve(dataStr)
        })
    })
    return promise
}

通过下面方法调用

var p = getFileByPath(path.join(__dirname, './files/2.txt'))

p.then(data => {
    console.log('读取成功' + data)
}, err => {
    console.log('读取失败' + err.message)
})

使用上面的Promise函数完成“先读取文件1，再读取文件2，最后再读取文件3”需求

getFileByPath(path.join(__dirname, './files/1.txt')).then(data => {
    console.log('文件1读取成功，开始读取文件2数据')
    getFileByPath(path.join(__dirname, './files/2.txt')).then(data => {
        console.log('文件2读取成功，开始读取文件3数据')
        getFileByPath(path.join(__dirname, './files/3.txt')).then(data => {
            console.log('文件3读取成功')
        })
    })
})

可以看到上面的函数依然是层层嵌套，因为这并不是Promise正确的打开方式。优化代码如下：

Promise的链式调用

new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('aaa')
    }, 1000)
}).then(res => {
    console.log(`${res},第一层代码`)
    return new Promise(resolve => {
        resolve(res + '111')
    })
}).then(res => {
    console.log(`${res},第二层代码`)
    return new Promise(resolve => {
        resolve(res + '222')
    })
}).then(res => {
    console.log(`${res},第三次代码`)
})

可这样简写

new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('aaa')
    }, 1000)
}).then(res => {
    console.log(`${res},第一层代码`)
    return Promise.resolve(res + '111')
}).then(res => {
    console.log(`${res},第二层代码`)
    return Promise.resolve(res + '222')
}).then(res => {
    console.log(`${res},第三次代码`)
})

更加简洁的方式

new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('aaa')
    }, 1000)
}).then(res => {
    console.log(`${res},第一层代码`)
    return res + '111'
}).then(res => {
    console.log(`${res},第二层代码`)
    return res + '222'
}).then(res => {
    console.log(`${res},第三次代码`)
})

Promise捕获异常

上面代码中并没有对异常进行处理。当其中一个路径不正确时，例如将1.txt替换成11.txt，其中11.txt是不存在的

getFileByPath(path.join(__dirname, './files/11.txt')).then(data => {
    console.log('文件1读取成功，开始读取文件2数据' + data)

    return getFileByPath(path.join(__dirname, './files/2.txt'))
}).then(data => {
    console.log('文件2读取成功，开始读取文件3数据' + data)

    return getFileByPath(path.join(__dirname, './files/3.txt'))
}).then(data => {
    console.log('文件3读取成功' + data)
})

console.log('OK')

上面代码执行后，会先打印出'OK'再报错。因为报错所在的函数是异步操作。

1、如果前面的Promise执行失败后不影响后面的Promise执行，这样做：

getFileByPath(path.join(__dirname, './files/11.txt')).then(data => {
    console.log('文件1读取成功，开始读取文件2数据' + data)

    return getFileByPath(path.join(__dirname, './files/2.txt'))
}, err => {
    console.log('这是失败的信息' + err.message)
    //需要return一个新的Promise不影响后面的.then
    return getFileByPath(path.join(__dirname, './files/2.txt'))
}).then(data => {
    console.log('文件2读取成功，开始读取文件3数据' + data)

    return getFileByPath(path.join(__dirname, './files/3.txt'))
}).then(data => {
    console.log('文件3读取成功' + data)
})

2、如果后续的Promise执行依赖于前面的Promise结果，前面的Promise失败后，则立即终止所有的Promise执行，通过.catch

getFileByPath(path.join(__dirname, './files/11.txt')).then(data => {
    console.log('文件1读取成功，开始读取文件2数据' + data)

    return getFileByPath(path.join(__dirname, './files/2.txt'))
}).then(data => {
    console.log('文件2读取成功，开始读取文件3数据' + data)

    return getFileByPath(path.join(__dirname, './files/3.txt'))
}).then(data => {
    console.log('文件3读取成功' + data)
}).catch(err => {   //如果前面有任何的Promise执行失败，会立即终止Promise执行，并进入catch中
    console.log('这是错误处理'+err.message)
})

Promise的三种状态

• pending ：等待状态，比如正在进行网络请求或者定时器没有到时间
• fulfill ： 满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
• reject ： 拒绝状态，当我们主动回调了reject时就处于该状态，并且会回调.catch()

Promise.all

需求：在两个请求都结束后进行xxx操作

普通回调

let isResult1 = false
let isResult2 = false
$.ajax({
    url: 'url1',
    success(data) {
        isResult1 = true
        handleResult()
    }
})
$.ajax({
    url: 'url2',
    success(data) {
        isResult2 = true
        handleResult()
    }
})

function handleResult() {
    if (isResult1 && isResult2) {
        //执行代码
    }
}

使用all

Promise.all([
    new Promise((resolve, reject) => {
        $.ajax({
            url: 'url1',
            success(data) {
                resolve(data)
            }
        })
    }),
    new Promise((resolve, reject) => {
        $.ajax({
            url: 'url2',
            success(data) {
                resolve(data)
            }
        })
    })
]).then(results => {
    results[0]  //url1的结果
    results[1]  //url2的结果
})