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