john-book
  • 测试
    • vue单元测试
  • 介绍
  • 设计模式
    • 单例模式
  • 个人收藏
    • 房价未来趋势
  • TodoList
  • TaskList
  • 前端架构设计
  • 时间管理
    • 2019前端自检与思考
  • 前端技术点
    • 异步编程和同步编程
    • 继承实现的几种方式
    • Http请求
    • 前端CI/CD持续集成持续交付
    • Promise
    • 其他工具
    • iphonex以及适配
    • 前端骨架屏方案
    • nginx
      • nginx配置upstream负载均衡
      • nginx配置gzip压缩
      • nginx转发配置
    • ajax
    • Dom&BOM
    • flexible
    • jsonp
    • 跨域
    • nunjucks
    • 水平垂直居中
    • 原型和原型链
    • 本地存储方式
    • 无头浏览器
    • chrome插件开发
    • webpack
      • DllPlugin
      • webpack升级
    • 宏任务微任务
    • 页面加载流程
    • http请求流程
    • 图形绘制技术
    • 节流和防抖
    • webpack单页面改多页面
    • redis安装使用
    • git
      • gitignore的使用
  • 算法
  • 前端资料
    • 开源技术库
    • 资料&文档
      • 信息流页面闪开总结
    • 每日收藏
  • 工具
    • UML图
    • Markdown
    • 测试工具
    • 产品工具
  • 站点博客
    • 站点集锦
  • 框架&库
    • React
    • Vue
    • vue3.0
  • 性能优化
    • 性能优化原则和方法
    • Http协议
      • Http Request Header
      • Http Response Header
  • LowCode
    • landingpage
    • landingpage自动化部署
    • landingpage相关
  • 加密
  • 腾讯云服务器
  • 微信公众号开发
  • 微信小程序
    • 小程序埋点统计
    • app分享小程序绑定
  • 数据库
    • 数据库实时抽取
  • 效率
    • 快速生成层级结构图
    • vscode插件vue模版
    • vscode文件头部注释插件
    • 快速生成项目目录结构树
    • vscode格式化配置
    • 前端组件化
  • 前端工作
  • 可视化
    • 页面可视化搭建
  • 前端规范
    • Javascript规范
    • git提交规范
    • eslint三大通用规范
Powered by GitBook
On this page
  • 重试retry
  • Promise
  • 实现一个promise.finally
  • Promise.all([p1,p2,p3])
  • Promise.race()

Was this helpful?

  1. 前端技术点

Promise

关于promise的各种知识

重试retry

//方式1
function retry(fn,times,delay){
    return new Promise((resolve,reject)=>{
        var attemp = function(){
            fn().resolve(resolve).catch(err=>{
                if(times==0){
                    reject(err)
                }else{
                    times--;
                    setTimeOut(()=>{
                        attemp()
                    },delay)
                }
            })
        }
    })
}

//方式2
function retry(fn,times,delay){
    return new Promise((resolve,reject)=>{
        var attemp = function(){
            fn().then(resolve(),err=>{
                if(times==0){
                    reject(err)
                }else{
                    times--;
                    setTimeOut(()=>{
                        attemp()
                    },delay)
                }
            })
        }
    })
}

Promise

Promise本身是同步的立即执行函数, 当在executor中执行resolve或者reject的时候, 此时是异步操作, 会先执行then/catch等,当主栈完成后,才会去调用resolve/reject中存放的方法执行,打印p的时候,是打印的返回结果,一个Promise实例。

console.log('script start')
let promise1 = new Promise(function (resolve) {
    console.log('promise1')
    resolve()
    console.log('promise1 end')
}).then(function () {
    console.log('promise2')
})
setTimeout(function(){
    console.log('settimeout')
})
console.log('script end')
// 输出顺序: script start->promise1->promise1 end->script end->promise2->settimeout

实现一个promise.finally

Promise.prototype.finally=function(callback){
    let Fn = this.constructor;
    return this.then(
        value=>Fn.resolve(callback()).then(()=>value),
        reason=>Fn.resolve(callback()).then(()=>{throw reason})
    )
}

Promise.all([p1,p2,p3])

全部执行完成再执行then函数,适用于多个请求调用返回结果后处理使用。

var p1 =new Promise(function(resolve,reject){
    setTimeout(function(){
        resolve(1);
    },0)
});
var p2 = new Promise(function(resolve,reject){
        setTimeout(function(){
            resolve(2);
        },200)
 });
 var p3 = new Promise(function(resolve,reject){
        setTimeout(function(){
            try{
            console.log(XX.BBB);
            }
            catch(exp){
                resolve("error");
            }
        },100)
});
Promise.all([p1, p2, p3]).then(function (results) {
    console.log("success")
     console.log(results);
}).catch(function(r){
    console.log("err");
    console.log(r);
});

Promise.race()

Promise.race()方法最初是在 ES6 中引入 Promise 时发布的,这个方法需要一个iterable作为参数。

Promise.race(iterable) 方法返回一个 promise,一旦迭代器中的某个promise解决或拒绝,返回的 promise 就会解决或拒绝。

与Promise.any()方法不同,Promise.race()方法主要关注 Promise 是否已解决,而不管其被解决还是被拒绝。

Promise.prototype.race = function(){
    
}

Previous前端CI/CD持续集成持续交付Next其他工具

Last updated 4 years ago

Was this helpful?