iT邦幫忙

2023 iThome 鐵人賽

DAY 16
0
Modern Web

我轉生成前端貓咪踏入React地獄的那些事系列 第 16

Day 16 處理同步(Synchronous)和非同步(Asynchronous)的方法Part.2-Promise

  • 分享至 

  • xImage
  •  

今天要來介紹的是現在比較常用處理非同步的方法分別是promise,這裡會先大幅度的簡化promise的用法,來先理解整個promise的運作概念。

promise

1.創建 promise: 為什麼需要創建promise因為它是一個建構函式,所以需要使用關鍵字new去創建promise,裡面帶兩個參數分別為resolve, reject。
resolve:代表執行成功地回傳值
reject:代表執行失敗的回傳值

2.then&catch: .then()代表著promise執行成功後所需要執行的區塊,而且可以接reslove的回傳值;.catch()代表promise執行失敗後所需要執行的區塊,而且可以接reject的回傳值。

3.then串接: .then是可以串接的,甚至是可以在then裡面再多new一個Promise物件,來處理多個非同步的問題

綜合上述提到的三點,範例如下:
我需要依序console.log() 出1,2,3,4,但是2,3有setTimeout,所以需要利用new promise進行處理然後回傳處理成功。


new Promise((resolve, reject) => {
    console.log(1)
      setTimeout(()=>{
    
    console.log(2);
    resolve("success1");
  }, 1000);
}).then((res)=>{
    console.log(res)
 return   new Promise((resolve)=>{
    setTimeout(()=>{ 
    console.log(3);
    resolve("success1")
  }, 1000)
        
    })

}).then((res)=>{
    console.log(res)
    console.log(4)
});

今天就先簡單介紹現在處理非同步的方法,但是強調promise還有很多種用法,但如果以一個初學的角度來看還是先熟悉基礎用法,會在使用上比較不容易造成混淆

事實上,ES6之後還有一個語法async await,它是promise的語法糖,在寫法上比promise更簡潔易懂,這部份就留做明天來介紹吧~


上一篇
Day 15 處理同步(Synchronous)和非同步(Asynchronous)的方法Part.1
下一篇
Day17 處理同步(Synchronous)和非同步(Asynchronous)的方法Part.3-Async Await
系列文
我轉生成前端貓咪踏入React地獄的那些事25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言