Promise and Reduce

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<total){
            runTask(page)
        }
    })
}
runTask(0)

開始放大招

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))