Promise我的筆記---【Promise的前世此生】

Promise初版本

案例是使用Node.js內置的fs模塊[就是文件系統模塊，負責讀寫文件。]來模擬異步操做

const fs = require('fs');
function getFilePath(fpath) {
    let p = new Promise(function (resolve, reject) {
        fs.readFile(fpath, 'utf-8', (err, dataStr) => {
            if (err) return reject(err)
            resolve(dataStr)
        })

    });
    return p

}

let p = getFilePath('./src/main.js');
p.then(
    function (data) {
        console.log('-----------------' +data + '---------------')
    },
    function (err) {
        console.log(err.message)

    })

Promise 第二版本

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

}

getFilePath('./src/main.js')
    .then(
        function (data) {
            console.log('-----------------' + data + '---------------')
        },
        function (err) {
            console.log(err.message)
        }
    )

新的需求: 依次讀取 1.txt --> 2.txt --> 3.txt

初版

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

}

getFilePath('./1.txt')
    .then(function (data) {
        console.log('-----------------' + data + '---------------')

        getFilePath('./2.txt')
            .then(function (data) {
                console.log('-----------------' + data + '---------------')

                getFilePath('./3.txt')
                    .then(function (data) {
                        console.log('-----------------' + data + '---------------')

                    })

            })
    })

第二版

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

}

getFilePath('./1.txt')
    .then(
        function (data) {
            console.log('-----------------' + data + '---------------')
            return getFilePath('./2.txt')
        })
    .then(
        function (data) {
            console.log('-----------------' + data + '---------------')
            return getFilePath('./3.txt')
        })
    .then(
        function (data) {
            console.log('-----------------' + data + '---------------')
        })

新需求 捕獲過程當中的錯誤 不影響後面的Promise正常執行

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

}

getFilePath('./沒有這個文件.txt')
    .then(
        function (data) {
            console.log('-----------------' + data + '---------------')
            return getFilePath('./2.txt')

        }, function (err) {
            console.log(err.message)
            return getFilePath('./2.txt')
        })
    .then(
        function (data) {
            console.log('-----------------' + data + '---------------')
            return getFilePath('./3.txt')
        })
    .then(
        function (data) {
            console.log('-----------------' + data + '---------------')
        })

新需求 後面的執行以來前面的結果，當前面失敗當即終止，並捕獲錯誤

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

}

getFilePath('./1.txt')
    .then(
        function (data) {
            console.log('-----------------' + data + '---------------')
            return getFilePath('./2.txt')

        })
    .then(
        function (data) {
            console.log('-----------------' + data + '---------------')
            return getFilePath('./22.txt')
        })
    .then(
        function (data) {
            console.log('-----------------' + data + '---------------')
            return getFilePath('./3.txt')
        })
    .catch(function (err) {
        console.log('【本身】捕獲到的錯誤'+ err.message)
    })

上面那樣寫不太優雅，來個終極版

const fs = require('fs');

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

}

Promise.all([getFilePath('./1.txt'), getFilePath('./不存在.txt'), getFilePath('./1.txt')])
    .then(datas => {
        console.log(datas);
    })
    .catch(err => {
        console.log(err)
    })

小結：

• Vue中的vue-resource（官方已經不推薦使用）和axios都是基於Promise的，徹底繼承了Promise的特性，看過文檔後分分鐘能夠上手
• axios中的http請求實現不須要在本身寫邏輯了 ，直接調用它的api就能夠