JS Promise DAY77

常见的非同步问题(不限於 AJAX)

回呼地狱
写法不一致
无法同时执行(jQuery有并行语法，但不直觉)

Promise 可解决上述问题
MDN: https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise

参考来源: https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise

function PromiseFn(num){
    return new Promise((reslove,reject)=>{
        setTimeout(()=>{
            if(num){
                reslove('success')
            }else{
                reject('fail');
            }
        },10)
    })
}
PromiseFn(1)
    .then(res=>{
        console.log(res);
    })
    .catch(res=>{
        console.log(res);
    })

Promise Chain

function PromiseFn(num){
    return new Promise((reslove,reject)=>{
        setTimeout(()=>{
            if(num){
                reslove(`success${num}`)
            }else{
                reject('fail');
            }
        },10)
    })
}
PromiseFn(1)
    .then(res=>{
        console.log(res);
        return PromiseFn(2)
    })
    .then(res=>{
        console.log(res);
        return PromiseFn(3)
    })
    .then(res=>{
        console.log(res);
    })
    .catch(res=>{
        console.log(res);
    })

这里要说明一下
then 其实可以接收成功、失败，但大多用来接收成功

// 利用两个callback function
function PromiseFn(num){
    return new Promise((reslove,reject)=>{
        setTimeout(()=>{
            if(num){
                reslove(`success${num}`)
            }else{
                reject('fail');
            }
        },10)
    })
}
PromiseFn(0)
    .then(res=>{
        console.log(res);
    },rej=>{
        console.log(rej);
    })

Promise 常用方法

Promise.all
同时发出多个请求，当所有请求完成才进下一步

function PromiseFn(num,time = 500){
    return new Promise((reslove,reject)=>{
        setTimeout(()=>{
            if(num){
                reslove(`成功${num}`)
            }else{
                reject('fail');
            }
        },time)
    })
}
Promise.all([
    PromiseFn(1,500),
    PromiseFn(2,2500),
    PromiseFn(3,1500),
])  
.then(res=>{
    console.log(res[0],res[1],res[2]);
})

promise.all只要有一个被拒绝，就会直接进入catch

Promise.race
会回传第一个完成的结果

function PromiseFn(num,time = 500){
    return new Promise((reslove,reject)=>{
        setTimeout(()=>{
            if(num){
                reslove(`成功${num}`)
            }else{
                reject('fail');
            }
        },time)
    })
}
Promise.race([
    PromiseFn(1,5000),
    PromiseFn(2,100),
    PromiseFn(3,1500),
])  
.then(res=>{
    console.log(res); // 成功 2
})

Promise 与 Ajax

let url = 'https://jsonplaceholder.typicode.com/' ;
function get(url){
    return new Promise((reslove,reject)=>{
        let xhr = new XMLHttpRequest();
        xhr.open('get',url);
        xhr.onload = function(){
            if(xhr.status == 200){
                reslove(xhr.response)
            }else{
                reject('失败')
            }
        }
        xhr.send();
    })
}
get(url)
    .then(res=>{
        console.log(res);
    })

那 JS核心我们就介绍到这里
若有任何问题或内容有误
都可以跟我说唷