前端JavaScripe番外之Promise的原理与基本使用

Promise 诺言 是一种异步编程解决方案（解决回调地狱问题） 内置对象

Promise原理

    有三种状态：  进行中pending  已成功 fulfilled  已失败 rejected
    两种情况  进行中->成功     进行中->失败
    new  Promise(function(resolve,reject){})
    通过.then(成功函数,失败函数)

Promise基本使用一

let status = false
        let pro = () => {
            if (!status) {
                return new Promise((resolve, reject) => {
                    console.log('success')
                })
            }else{
                return new Promise((reslove,reject)=>{
                    console.log('error')
                })
            }
        }
        pro().then(res=>{
            console.log(res)
        }).catch(err=>{
            consle.log(err)
        })
        

Promise基本使用二

let pro = new Promise((reslove,relect)=>{
            $.ajax({
                url:'./data/json.txt',
                success:res=>{
                    console.log(res)
                    console.log('success')
                },
                error:err=>{
                    console.log(err)
                    console.log('error')
                }
            })
        })
        pro.then(res=>{
            console.log(res)
            console.log('success')
        }).catch(err=>{
            console.log(err)
            console.log('error')
        })

Promise基本使用三

let pro = new Promise((reslove, relect) => {
            $.ajax({
                url: './data/json.txt',
                success: res => {
                    console.log(res)
                    console.log('success1')
                },
                error: err => {
                    console.log(err)
                    console.log('error')
                }
            })
        })
        let pro1 = new Promise((reslove, relect) => {
            $.ajax({
                url: './data/json.txt',
                success: res => {
                    console.log(res)
                    console.log('success2')
                },
                error: err => {
                    console.log(err)
                    console.log('error')
                }
            })
        })
        //Promise.all  所有的 异步操作都成功后，在去执行一个动作
        //把多个promise实例当做一个promise实例，当所有的状态都完成之后，才会触发新的promise对象的then方法
        //如果有多个接口获取数据 我们需要等待所有接口数据获取完成后  页面在渲染完成
        Promise.all([pro,pro1]).then(res=>{
            let [res1,res2] = res //解构附值
            console.log(res1,res2)
        }).catch(err=>{
            console.log('失败了一个')
        })
        

Promise 基本使用4 优化第4种写法

Promise.all([
            $.ajax({url:'./data/json.txt'}),
            $.ajax({url:'./data/arr.txt'}),
            $.ajax({url:'./data/num.txt'}),
        ]).then(res=>{
            let [res1,res2,res3] = res//解构附值
            console.log(res1,res2,res3)
        }).catch(err=>{
            console.log('失败了一个')
        })

Promise all race 的使用 以及区别

// 加载图片
        function loading(src) {
            return new Promise((resolve, reject) => {
                let img = document.createElement('img')
                img.src = src;
                img.onload = () => {
                    resolve(img)
                },
                    img.onerror = () => {
                        reject(img)
                    }
            })
        }
        // 页面显示
        function show(imgs) {
            imgs.forEach(item => {
                document.body.appendChild(item)
            })
        }
        Promise.all([
            //谁先来 加载谁  
            loading("https://img10.360buyimg.com/n4/s260x260_jfs/t3079/363/6070979658/42126/5b5c2f39/589af086N4a3bed39.jpg"),
            loading("https://img14.360buyimg.com/n4/s260x260_jfs/t4345/284/2534342556/119746/550dee37/58d34a9dNf0bd717f.jpg"),
            loading("https://img13.360buyimg.com/n4/s260x260_jfs/t3259/170/5587914266/144572/64259fc5/5873347aN14e34822.jpg"),
        ]).then(show)

// race all 区别
        function loading(src) {
            return new Promise((resolve, reject) => {
                let img = document.createElement('img')
                img.src = src;
                img.onload = () => {
                    resolve(img)
                },
                    img.onerror = () => {
                        reject(img)
                    }
            })
        }
        // 页面显示
        function show(imgs) {
                document.body.appendChild(imgs)
        }
        Promise.race([
            //Promise.race() 谁先来渲染谁  Promise.all() 全部加载完成在渲染
            loading("https://img10.360buyimg.com/n4/s260x260_jfs/t3079/363/6070979658/42126/5b5c2f39/589af086N4a3bed39.jpg"),
            loading("https://img14.360buyimg.com/n4/s260x260_jfs/t4345/284/2534342556/119746/550dee37/58d34a9dNf0bd717f.jpg"),
            loading("https://img13.360buyimg.com/n4/s260x260_jfs/t3259/170/5587914266/144572/64259fc5/5873347aN14e34822.jpg"),
        ]).then(show)

Promise es十二
如果有一个 Promise 的状态为成功,那就走第一个成功。是根据加载时间来决定第一个渲染谁
如果Promise 的状态为全部失败，那就是失败

	Promise.any([
         new Promise((resolve, reject) => { setTimeout(reject, 500, '失败') }),
         new Promise((resolve, reject) => { setTimeout(resolve, 1000, '成功1') }),
         new Promise((resolve, reject) => { setTimeout(resolve, 1500, '成功2') }),
     ]).then(res => {
         console.log(res)
     }).catch(err => {
         console.log('shib')
     })