异步编程解决方案Promise

使用方法

//异步状态管理 resolve成功 reject失败
let p = new Promise((resolve,reject)=>{
    setTimeout(()=>{   //异步操作
        console.log('hi');
        resolve('成功')
        // reject('失败')
    },1000)
}).then(res=>{
    console.log(res);   //成功
},err=>{
    console.log(err);   //失败
})

//打印结果 1 2 3
let p=new Promise((resolve,reject)=>{
    console.log(1);  //没异步操作立即执行
    resolve()
})
console.log(2);
p.then(res=>{   //异步性
    console.log(3);
})

状态（不可逆，暂不举例）

使用Promise优雅ajax请求

• ajax请求

function ajax(url,successCallback,failCallback){
    // 1、创建XMLHttpRequest对象
    var xmlhttp 
    if(window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest()
    }else{   //兼容早期浏览器
        xmlhttp=new ActiveXObject('Microsoft.XMLHTTP')
    }
    // 2、发送请求
    xmlhttp.open('GET',url,true)
    xmlhttp.send()
    // 3、服务端响应
    xmlhttp.onreadystatechange=function{
        if(xmlhttp.readyState===4&&xmlhttp.status===200){
            var obj=JSON.parse(xmlhttp.responseText)
            successCallback&&successCallback(obj)   //参数传递了调用
        }else if(xmlhttp.readyState===4&&xmlhttp.status===404){
            failCallback&&failCallback(xmlhttp.statusText)
        }
    }
}

• 回调地狱 cllback hell

//1->2->3
ajax('static/a.json',res=>{
    console.log(res);
    ajax('static/b.json',res=>{
        console.log(res);
        ajax('static/c.json',res=>{
            console.log(res);
        })
    })
})

• 使用Promise

function getPromise(url){
    return new Promise((resolve,reject)=>{
        ajax(url,res=>{
            resolve(res)
        },err=>{
            reject(err)
        })
    })
}

getPromise('static/a.json')
    .then(res=>{
        console.log(res);
        return getPromise('static/b.json')   //需要返回promise
    }).then(res=>{
        console.log(res);
        return getPromise('static/c.json')
    }).then(res=>{
        console.log(res);
    }).catch(err=>{      //统一处理错误  以上任意一个请求错误直接到catch处理
        console.log(err);
    })

• 结合async/await 按顺序执行（类似同步写法）

import ajax from './ajax'
function request(url){
    return new Promise(resolve=>{
        ajax(url,res=>{
            resolve(res)
        })
    })
}
//await只能在async中显示  await等待异步操作执行完再继续执行下一个
async function getData(){
    const res1=await request('static/a.json')
    console.log(res1);
    const res2=await request('static/b.json')
    console.log(res2);
    const res3=await request('static/c.json')
    console.log(res3);
}
getData()

Promise的静态方法

• Promise.resolve()

let p1=Promise.resolve('success')
console.log(p1);
p1.then(res=>{
    console.log(res);   //success
})

• Promise.reject()

let p2=Promise.reject('fail')
console.log(p2);
p2.catch(err=>{
    console.log(err);   //fail
}) 

使用场景

//没有new Promise实例，还要使用then/catch时可以直接使用Promise的静态方法
function foo(flag){
    if(flag){
        return new Promise(resolve=>{
            resolve('success')
        })
    }else{
        // return 'fail' 直接返回字符串 没有catch/then方法会报错
        return Promise.reject('fail')
    }
}
foo(false).then(res=>{
    console.log(res);  
},err=>{
    console.log(err);
})

• Promise.all()

//三个异步操作都执行完成后 再执行其他
let p1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        console.log(1);
        resolve('1成功')
    })
},1000)
let p2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        console.log(2);
        // resolve('2成功')
        reject('2失败')
    })
},2000)
let p3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        console.log(3);
        resolve('3成功')
    })
},3000)

Promise.all([p1,p2,p3]).then(res=>{
    console.log(res);   //[...] 都成功返回数组里面每一个resolve的传参res
},err=>{
    console.log(err);   //打印2失败，只要有一个失败 直接进入err
})

• Promise.race()

Promise.race([p1,p2,p3]).then(res=>{
    console.log(res);   //只要有一个完成 打印先完成的
},err=>{
    console.log(err);   //只要有一个失败 都失败
})

Promise.all()的使用场景

//上传图片 全部传完提示用户上传成功
const imgArr=['1.jpg','2.jpg','3.jpg']
let promiseArr=[]
imgArr.forEach(item=>{
    promiseArr.push(new Promise((resolve,reject)=>{
        //此处进行图片上传的操作
        resolve(url) 
    }))
})
Promise.all(promiseArr).then(res=>{   
    //res为图片的url 插入数据库操作
    console.log('图片全部上传完成');   
})

Promise.race()的使用场景

//加载图片 设置超时时间，如果时间内加载完显示，否则提示超时
function getImg(){
    return new Promise((resolve,reject)=>{
        let img=new Image()
        img.onload=function(){
            resolve(img)  //如果加载成功
        }
        img.src='http://www.xxx.com/xx.jpg'
    })

}
function timeout(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject('图片请求超时')   //图片超时
        },2000)
    })
}
Promise.race([getImg(),timeout()]).then(res=>{    //数组内两个promise对象
    console.log(res);  
}).catch(err=>{
    console.log(err);   
})