JS Promise DAY77

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

  1. 回呼地狱
  2. 写法不一致
  3. 无法同时执行(jQuery有并行语法,但不直觉)

Promise 可解决上述问题
MDN: https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise
https://ithelp.ithome.com.tw/upload/images/20201026/201230391ITyo4cs5i.jpg
参考来源: 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核心 我们就介绍到这里
若有任何问题 或 内容有误
都可以跟我说唷/images/emoticon/emoticon41.gif


<<:  CMM和CMMI

>>:  [鼠年全马] W39 - 使用Vuex管理资料状态(下)

Day 21: Convolutional Neural Networks — 卷积神经网路初探(下)

卷积 Convolution 想像我们有一张用放大镜扫视,纪录我们观察到的重要图样的图像,这是一个很...

EP28 - 使用 Container Insights 监控 EKS 上的容器,并整合 Grafana 作为仪表板

在 EP25 和 EP26, 我们为 EKS 配置了 Grafana 和 Loki, 让我们可以透过...

离职倒数25天:我想要在我的社交平台上分享我的创作,而不只是生活

朋友问我辞职後,最想做的第一件事是什麽,我居然回答坚持每天写日记。从肺炎开始用电脑写日记写了一年多了...

Day 23 Flux

第 23 天 ! 使用 context 来传送,虽然达到了能跟 目标 component 直接对接的...

Day 2 - Home Lab 事前准备 - 安装篇

在 Day 1 时,我们有稍微提到了 Home Lab 可以使用一般的桌上型电脑来建置,那今天我们要...