当前位置: 代码迷 >> 综合 >> 深入理解 Promise (下)
  详细解决方案

深入理解 Promise (下)

热度:68   发布时间:2023-10-22 07:54:12.0

经过几天源码研究学习之后,基本上对Promise有了深入的了解,也手动封装了自己了Promise工具类,下面就是我们去在应用场景中去验证这个工具类的使用了

上 - 理论知识

  • Promise 规范
  • ES6 Promise API
  • Polyfill和扩展类库
  • Promise 在应用中的错误用法和误区
    • 当作回调使用
    • 没有返回值
    • 没有catch
    • catch()与then(null, onRejected)
    • 断链
    • 穿透
    • 长度未知的串行与并行
    • Promise.resolve的使用
  • 最佳实践

中 - 手动封装

  • 实现一个简单的 Promise工具类
    • Promise类的结构
    • 构造器的初始化
    • then方法
    • catch方法
  • 添加扩展功能函数
    • all
    • race
    • resolve
    • reject
    • wait
    • stop
    • always
    • done
    • defer
    • timeout
    • sequence
  • 测试
  • 源码

下 - 实践应用

  • 结合应用场景使用Promise
    • 使用Promise编写Web Notifications提示
    • 使用Deferred封装异步请求
    • 异步请求的超时处理
    • 基于Promise的fs方法链

Web Notifications提示

显示桌面通知的流程如下:

  1. 用户进入页面要判断是否默认允许显示桌面通知
  2. 如果不允许,提示是否允许
  3. 如果点击了允许,则显示通知
  4. 如果点击了拒绝,则不显示,后面的任务不执行
  5. 显示通知失败,则打印显示失败的信息
  6. 显示成功,判断用户是否点击了通知或点击了关闭
  7. 如果点击了,则关闭通知
  8. 如果没有点击,则2s之后自动关闭
  9. 关闭之后打印消息

代码逻辑

       
const msgOpt = {
body: ‘你今天还有需要完成的任务哦!’,
icon: ‘http://7xi480.com1.z0.glb.clouddn.com/avatar100.jpg’
}
// 是否允许显示桌面通知
function requestNoti(){
return new MPromise( (resolve, reject)=>{
if(Notification.permission === ‘granted’){
resolve()
} else{
Notification.requestPermission( function (status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
if (status === ‘granted’) {
resolve()
} else {
reject( new Error( ‘user denied’));
}
});
}
})
}
// 显示通知
function showNoti(msgObj){
return new MPromise( (resolve, reject)=>{
var n = new Notification( ‘通知’,msgObj)
// 3s钟之内,无论是用户点击还是超时未点击关闭,都将关闭通知
MPromise.timeout(closeNoti(), 3000).always( ()=>{
n.close();
resolve();
})
// 如果打开失败 reject 触发rejected回调
n.addEventListener( ‘error’, reject)
function closeNoti(){
return new MPromise( rs => {
n.addEventListener( ‘click’, rs)
n.addEventListener( ‘close’, rs)
})
}
})
}
// 开始
requestNoti()
.then( ()=>{
console.log( ‘显示 桌面通知’)
return showNoti(msgOpt)
})
.catch( ()=>{
console.log( ‘中断 不允许显示桌面通知’)
return MPromise.stop();
})
.then( ()=>{
console.log( ‘关闭 桌面通知’)
})
.catch( err=>{
console.log( ‘失败 桌面通知打开失败’)
})

这里API的应用
timeout() 用于限制2s钟之内,通知必须关闭
always() 与timeout结合使用
stop() 在promise链的中途停止后面的执行

使用Deferred封装异步请求

这里为什么使用Deferred来封装异步请求呢?
因为使用 new Promise() 的形式会有多一层嵌套,使用 deferred 可以对流程控制自由定制

       
function ajaxGet(URL) {
var deferred = MPromise.deferred();
var req = new XMLHttpRequest();
req.open( 'GET', URL, true);
req.onload = function () {
if (req.status === 200) {
deferred.resolve(req.responseText);
} else {
deferred.reject( new Error(req.statusText));
}
};
req.onerror = function () {
deferred.reject( new Error(req.statusText));
};
req.send();
var abort = function () {
if (req.readyState !== XMLHttpRequest.UNSENT) {
req.abort();
}
};
return {
promise: deferred.promise,
abort: abort
}
}
ajaxGet( 'd1.json').promise
.then( res=> JSON.parse(res))
.catch( err=> console.log(err))
.then( res=> console.log(res))

异步请求的超时处理

发起一个异步请求,如果3s内还没有请求成功,则取消请求

       
var getData = ajaxGet( 'd1.json');
console.log( '显示loading')
MPromise.timeout(getData.promise, 3000)
.then( res=>{
return JSON.parse(res);
}, err=>{
if(err instanceof window.TimeoutError){
getData.abort();
throw new Error( '请求超时,取消请求')
} else{
throw err;
}
})
.then( res=>{ console.log( '请求成功: ', res); })
.always( ()=>{ console.log( '取消loading') })
.catch( err=>{ console.log(err) })

基于Promise的fs方法链

使用Promise对fs封装的好处是可以很方便的异步处理文件流,对错误可以集中式处理,如果是同步使用fs相关方法,错误处理将会变得复杂

       
var fs = require( "fs");
var MPromise = require( './promise_browser');
function File() {
this.promise = MPromise.resolve();
}
// Static method for File.prototype.read
File.read = function (filePath) {
var file = new File();
return file.read(filePath);
};
File.prototype.then = function (onFulfilled, onRejected) {
this.promise = this.promise.then(onFulfilled, onRejected);
return this;
};
File.prototype[ "catch"] = function (onRejected) {
this.promise = this.promise.catch(onRejected);
return this;
};
File.prototype.read = function (filePath) {
return this.then( function () {
return fs.readFileSync(filePath, "utf-8");
});
};
File.prototype.transform = function (fn) {
return this.then(fn);
};
File.prototype.write = function (filePath) {
return this.then( function (data) {
return fs.writeFileSync(filePath, data)
});
};
module.exports = File;

使用

       
var File = require( "./fs-promise-chain");
var inputFilePath = "input.txt",
outputFilePath = "output.txt";
File.read(inputFilePath)
.transform( function (content) {
return ">>" + content;
})
.write(outputFilePath)
.catch( function(err){
console.log(err)
})

对于 nodejs 相关的异步处理,Q 或 bluebirde 都有相关的API用于包装成Promise对象,

例如 bluebirde 中可以使用 Promise.promisify 方法进行包装

       
var readFile = Promise.promisify( require( "fs").readFile);
readFile( "myfile.js", "utf8").then( function(contents) {
return eval(contents);
}).then( function(result) {
console.log( "The result of evaluating myfile.js", result);
}).catch( SyntaxError, function(e) {
console.log( "File had syntax error", e);
//Catch any other error
}).catch( function(e) {
console.log( "Error reading file", e);
});

这里还是建议大家使用 Q 或者 bluebirde 等相关成熟的Promise方案,本系列的Promise学习就到这里的,在此过程中封装的Promise工具类也主要用于学习和理解Promise的原理。

重点是我们掌握了Promise的使用之后,能更好的和ES7 的 Async/await 结合起来使用,那么以后的异步处理就更加得心应手了。

据说 node7.0 已经支持 Async/await ,让我们视目以待吧。

相关示例源码,请至 MPromise 查看

http://coderlt.coding.me/2016/12/05/promise-in-depth-an-introduction-3/

  相关解决方案