资讯专栏INFORMATION COLUMN

Promise and Reduce

saucxs / 1743人阅读

摘要:组织代码版解决异步的问题。点评总让人感觉就是为了而存在一些人巧妙的把封装到弹窗组件上。这样才能发挥它阻止代码的功效不少人认为,这是一个然并卵的东西,项目中很少使用,甚至不使用。

Promise 组织代码 Promise ajax版promise,解决异步的问题。
ajax1().then(ajax2).then(ajax3).then(()=>{})
点评:总让人感觉promise就是为了ajax而存在
一些人巧妙的把promise 封装到 弹窗组件上。
//callback 模式
alert("您确定要删除这条数据吗",()=>{
        console.log("删除成功")
    },()=>{
        console.log("取消删除")
    })
    
//promise 化,意义貌似有点不大!!!
alert("您确定要删除这条数据吗").then(()=>console.log("删除成功")).catch(()=>console.log("取消删除"))
点评:想法很好,终于突破了ajax,但是如果单纯的如此使用,觉得有点“故弄玄虚”
个人觉得promise使用的场景,应该倾向有点小复杂的场景
function enSureDelete(){
    return new Promise((resolve,reject)=>{
        alert("你确定要添加这个用户吗",()=>resolve,()=>reject)
    })
}
function validateUser(){
    return new Promise((resolve,reject)=>{
        let username=$("id").val()
        if(username){
            resolve()
        }else{
            reject({msg:"不可为空"})
        }
    })  
}
function submitAPi(){
    return new Promise((resolve,reject)=>{
        $.ajax({success:resolve,error:reject})
    })
}
$(button).click(()=>{
  enSureDelete().then(validateUser).then(submitAPi).catch(({msg})=>msg&&Tip(msg))
})
点评:感觉可以片面的去认为,使用promise 就是为了使用它的then和catch ,而且是奔着它多个then 和 一个catch 而去。这样才能发挥它阻止代码的功效
    $p().then().then().then().catch()
Promise && reduce reduce
不少人认为 reduce ,这是一个然并卵的东西,项目中很少使用,甚至不使用。如果统计使用率,估计map>foreach>filter>sort>some>every>...>reduce
let a=[1,2,3,4]
let sum=a.reduce((a,b)=>a+b,0)
这个例子真心不陌生,想想也是,项目中即使有这种需求,正常都会 for/map/foreach 去累计。reduce 感觉刚被造出来,就已经out
但是 reduce 最彪悍
举个例子,写过爬虫的朋友,不管你是看别人的代码,还是自己写代码,一定对以下代码相当熟悉
let page=0,total=100
function runTask(page){
    request(`//www.xxx.com/${page}.html`).then(()=>{
        //todo
        //....
        page++
        if(page
开始放大招
let arr=[]
for(let i=0;i<100;i++){
    arr.push(request(`//www.xxx.com/${page}.html`))
}
let $p=arr.reduce((a,b)=>{
return a.then(()=>{
        return b().then(()=>{
                //todo
                return data
        })
    })
},Promise.resolve())

$p.then().catch()
当然我还可以优化下,来10个并发
let arr={}
for(let i=0;i<100;i++){
    let a=parseInt(1/10)
    arr[a]=arr[a]||[]
    arr[a].push(request(`//www.xxx.com/${page}.html`))
}
arr=Array.from(arr)
let $p=arr.reduce((a,b)=>{
return a.then(()=>{
    return Promise.all(b).then(()=>{...})
})
},Promise.resolve())

$p.then().catch()
再来一波跟验证有关的
const Rules={
    Required(msg){//验证字段是否为空
        return(value){
            if(value){
                return {succ:true}
            }else{
                return {succ:false,msg}
            }
        }
    },
    ...
}
const validates = [//构造验证规则
            { fn: Rules.Required("请填写有效的姓名!"), value: $("name").val() },
            { fn: Rules.Illegal("姓名", { min: 2, max: 11 }), value: $("name").val() },
            { fn: Rules.Required("请填写有效的身份证!"), value: $("shenfenzheng").val() },
            { fn: Rules.Certificate(_certNo), value: $("shenfenzheng").val() }
        ]
        const $P = validates.reduce((p, rule) => {
            return p.then(() => {
                return new Promise((resolve, reject) => {
                    let _R = rule.fn(rule.value)
                    if (_R.succ) {
                        resolve()
                    } else {
                        reject(_R)
                    }
                })
            })
        }, Promise.resolve())

        $P.then(() => {
            return $.ajax().then(()=>{//todo})
        }).catch(err => Toast.info(err.msg))

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94875.html

相关文章

  • 精读《用 Reduce 实现 Promise 串行执行》

    摘要:引言本周精读的文章是,讲了如何利用实现串行执行。总结串行队列一般情况下用的不多,因为串行会阻塞,而用户交互往往是并行的。更多讨论讨论地址是精读用实现串行执行如果你想参与讨论,请点击这里,每周都有新的主题,周末或周一发布。 1 引言 本周精读的文章是 why-using-reduce-to-sequentially-resolve-promises-works,讲了如何利用 reduce...

    JinB 评论0 收藏0
  • JavaScript Promise:去而复返

    摘要:的比较接近,如下创建的构造器接受一个函数作为参数,它会传递给这个回调函数两个变量和。在回调函数中做一些异步操作,成功之后调用,否则调用。另外还要注意,也没有遵循给否定回调函数传递对象的惯例。当你从的回调函数返回的时候,这里有点小魔法。 原文:http://www.html5rocks.com/en/tutorials/es6/promises/ 作者:Jake Archibald 翻译...

    Lowky 评论0 收藏0
  • 30s js代码片段 翻译

    摘要:可否被整除使用模运算符来检查余数是否等于。数值增加序号后缀使用模运算符来查找单位数和十位数的值。 这是对 github 上30s代码片段的翻译整理,由于作者的文档是通过脚本生成的,也就懒得去提pull了,整理了放到博客上供大家学习参考,后续会持续跟进翻译。 Array Array concatenation (合并参数) 使用 Array.concat() 来连接参数中的任何数组或值。...

    sevi_stuo 评论0 收藏0
  • 我们不背诵 API,只实现 API

    摘要:接下来,我们换一种思路,用一个相对较新的来实现方法。从这道题目看出,相比考察死记硬背,这样的实现更有意义。对数组的操作我们不能陌生,其中方法更要做到驾轻就熟。最后,我们再看下社区上著名的和的实现。 有不少刚入行的同学跟我说:JavaScript 很多 API 记不清楚怎么办?数组的这方法、那方法总是傻傻分不清楚,该如何是好?操作 DOM 的方式今天记,明天忘,真让人奔溃! 甚至有的开发...

    wudengzan 评论0 收藏0

发表评论

0条评论

saucxs

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<