JS Promise DAY77

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

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 functionfunction 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核心 我们就介绍到这里
若有任何问题 或 内容有误
都可以跟我说唷