成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Promise and Reduce

saucxs / 1784人閱讀

摘要：組織代碼版解決異步的問題。點(diǎn)評(píng)總讓人感覺就是為了而存在一些人巧妙的把封裝到彈窗組件上。這樣才能發(fā)揮它阻止代碼的功效不少人認(rèn)為，這是一個(gè)然并卵的東西，項(xiàng)目中很少使用，甚至不使用。

Promise 組織代碼 Promise ajax版promise,解決異步的問題。 
ajax1().then(ajax2).then(ajax3).then(()=>{})
點(diǎn)評(píng)：總讓人感覺promise就是為了ajax而存在
一些人巧妙的把promise 封裝到 彈窗組件上。 
//callback 模式
alert("您確定要?jiǎng)h除這條數(shù)據(jù)嗎",()=>{
        console.log("刪除成功")
    },()=>{
        console.log("取消刪除")
    })
    
//promise 化，意義貌似有點(diǎn)不大?。。?alert("您確定要?jiǎng)h除這條數(shù)據(jù)嗎").then(()=>console.log("刪除成功")).catch(()=>console.log("取消刪除"))
點(diǎn)評(píng)：想法很好，終于突破了ajax,但是如果單純的如此使用，覺得有點(diǎn)“故弄玄虛”
個(gè)人覺得promise使用的場景，應(yīng)該傾向有點(diǎn)小復(fù)雜的場景 
function enSureDelete(){
    return new Promise((resolve,reject)=>{
        alert("你確定要添加這個(gè)用戶嗎",()=>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))
})
點(diǎn)評(píng)：感覺可以片面的去認(rèn)為，使用promise 就是為了使用它的then和catch ,而且是奔著它多個(gè)then 和 一個(gè)catch 而去。這樣才能發(fā)揮它阻止代碼的功效
    $p().then().then().then().catch()
Promise && reduce reduce 
不少人認(rèn)為 reduce ，這是一個(gè)然并卵的東西，項(xiàng)目中很少使用，甚至不使用。如果統(tǒng)計(jì)使用率，估計(jì)map>foreach>filter>sort>some>every>...>reduce
let a=[1,2,3,4]
let sum=a.reduce((a,b)=>a+b,0)
這個(gè)例子真心不陌生，想想也是，項(xiàng)目中即使有這種需求，正常都會(huì) for/map/foreach 去累計(jì)。reduce 感覺剛被造出來，就已經(jīng)out
但是 reduce 最彪悍 
舉個(gè)例子，寫過爬蟲的朋友，不管你是看別人的代碼，還是自己寫代碼，一定對(duì)以下代碼相當(dāng)熟悉
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()


當(dāng)然我還可以優(yōu)化下，來10個(gè)并發(fā)


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


再來一波跟驗(yàn)證有關(guān)的


const Rules={
    Required(msg){//驗(yàn)證字段是否為空
        return(value){
            if(value){
                return {succ:true}
            }else{
                return {succ:false,msg}
            }
        }
    },
    ...
}
const validates = [//構(gòu)造驗(yàn)證規(guī)則
            { fn: Rules.Required("請(qǐng)?zhí)顚懹行У男彰?), value: $("name").val() },
            { fn: Rules.Illegal("姓名", { min: 2, max: 11 }), value: $("name").val() },
            { fn: Rules.Required("請(qǐng)?zhí)顚懹行У纳矸葑C！"), 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))

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94875.html

相關(guān)文章

  • 精讀《用 Reduce 實(shí)現(xiàn) Promise 串行執(zhí)行》

    摘要：引言本周精讀的文章是，講了如何利用實(shí)現(xiàn)串行執(zhí)行。總結(jié)串行隊(duì)列一般情況下用的不多，因?yàn)榇袝?huì)阻塞，而用戶交互往往是并行的。更多討論討論地址是精讀用實(shí)現(xiàn)串行執(zhí)行如果你想?yún)⑴c討論，請(qǐng)點(diǎn)擊這里，每周都有新的主題，周末或周一發(fā)布。 1 引言 本周精讀的文章是 why-using-reduce-to-sequentially-resolve-promises-works，講了如何利用 reduce...

    JinB 評(píng)論0 收藏0

  • JavaScript Promise：去而復(fù)返

    摘要：的比較接近，如下創(chuàng)建的構(gòu)造器接受一個(gè)函數(shù)作為參數(shù)，它會(huì)傳遞給這個(gè)回調(diào)函數(shù)兩個(gè)變量和。在回調(diào)函數(shù)中做一些異步操作，成功之后調(diào)用，否則調(diào)用。另外還要注意，也沒有遵循給否定回調(diào)函數(shù)傳遞對(duì)象的慣例。當(dāng)你從的回調(diào)函數(shù)返回的時(shí)候，這里有點(diǎn)小魔法。 原文：http://www.html5rocks.com/en/tutorials/es6/promises/ 作者：Jake Archibald 翻譯...

    Lowky 評(píng)論0 收藏0

  • 30s js代碼片段 翻譯

    摘要：可否被整除使用模運(yùn)算符來檢查余數(shù)是否等于。數(shù)值增加序號(hào)后綴使用模運(yùn)算符來查找單位數(shù)和十位數(shù)的值。 這是對(duì) github 上30s代碼片段的翻譯整理，由于作者的文檔是通過腳本生成的，也就懶得去提pull了，整理了放到博客上供大家學(xué)習(xí)參考，后續(xù)會(huì)持續(xù)跟進(jìn)翻譯。 Array Array concatenation (合并參數(shù)) 使用 Array.concat() 來連接參數(shù)中的任何數(shù)組或值。...

    sevi_stuo 評(píng)論0 收藏0

  • 我們不背誦 API，只實(shí)現(xiàn) API

    摘要：接下來，我們換一種思路，用一個(gè)相對(duì)較新的來實(shí)現(xiàn)方法。從這道題目看出，相比考察死記硬背，這樣的實(shí)現(xiàn)更有意義。對(duì)數(shù)組的操作我們不能陌生，其中方法更要做到駕輕就熟。最后，我們?cè)倏聪律鐓^(qū)上著名的和的實(shí)現(xiàn)。 有不少剛?cè)胄械耐瑢W(xué)跟我說：JavaScript 很多 API 記不清楚怎么辦？數(shù)組的這方法、那方法總是傻傻分不清楚，該如何是好？操作 DOM 的方式今天記，明天忘，真讓人奔潰！ 甚至有的開發(fā)...

    wudengzan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<