Promise個人筆記---【Promise的前世今生】
阿新 • • 發佈:2018-10-19
fun api rom python http ssa utf 官方 調用
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 第二版本
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
第一版
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 + ‘---------------‘) }) }) })
第二版
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正常執行
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 + ‘---------------‘)
})
新需求 後面的執行以來前面的結果,當前面失敗立即終止,並捕獲錯誤
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)
})
小結:
- Vue中的vue-resource(官方已經不推薦使用)和axios都是基於Promise的,完全繼承了Promise的特性,看過文檔後分分鐘可以上手
- axios中的http請求實現不需要在自己寫邏輯了 ,直接調用它的api就可以
Promise個人筆記---【Promise的前世今生】