0%

【JS】Promise學習筆記-基礎用法

發表於 更新於 分類於

【JS】Promise學習筆記-基礎用法

▌前言

之前有說明Javascript是一個單線程的語言(同步語言)，一次只能做一件事情，所以我們有時候會使用一些非同步的webAPIs或是像Ajax。由於沒辦法知道這些非同步的任務何時會執行結束，又或者是會不會有發生錯誤行為。有些可能要等A非同步執行完才能執行B非同步任務，為了解決以上問題，可以透過JS ES6的物件Promise來處理這些非同步的任務。

▌Promise的三種狀態

由於Promise可以幫助了解非同步的執行到哪裡，所以Promise有三種狀態

  1. pending未確認：還在執行中，未得到結果
  2. fulfilled已實現：非同步行為成功，成功後會回傳一個參數，用.then接收參數
  3. rejectrd被否決：非同步行為失敗，確認失敗後會回傳一個參數，用catch接收參數

透過了解Promise的狀態，可以讓我們決定要在甚麼狀態做哪些事情。

▌Promise基本了解

它是屬於建構函式，來看一下它有哪些

1
2
const promiseTest = new Promise(function(resolve,reject){});
console.log(promiseTest);

  • 可以看到它在
    [PromiseStatus]: “pending”
    [PromiseValue]: undefined
  • 有then、catch、finally方法可以用

const promiseTest = new Promise()不可運行會跳錯，因為Promise要在一個callback function


▌Promise成功-執行resolve()，用then()接收

當非同步成功時，可以讓它執行resolve

1
2
3
4
const promiseTest = new Promise(function(resolve,reject){
    resolve('非同步成功')
});
console.log(promiseTest);

可以看到它在

  • PromiseStatus: “resolved”
  • PromiseValue: 非同步成功 ->這邊的內容就是resolve('非同步成功')傳出的值

傳出的值就用.then()接收

1
2
3
4
5
6
7
const promiseTest = new Promise(function(resolve,reject){
    resolve('非同步成功')
});
console.log(promiseTest);
promiseTest.then(function(res){
console.log('res是'+res)
})



可以看到resolve(‘非同步成功’)的值透過then()裡的callback function來接收，並console出來。

▌Promise失敗-執行reject()，用catch()接收

它的用法resolve非常相像，改為用catch接收資料

1
2
3
4
5
6
7
const promiseTest = new Promise(function(resolve,reject){
    reject('非同步失敗')
});
console.log(promiseTest);
promiseTest.catch(function(res){
console.log('res是'+res)
})



resolve與reject只會有一種狀態

▌注意:將Promise作為函式使用

我們將Promise設計成一個函式，當需要使用的時候，不用每次都宣告一個Promise物件，讓它執行函式，並retrun一個Promise，如下：

1
2
3
4
5
function PromiseFn(){
    return new Promise(function(resolve,reject){
    
    })
}

再做一個範例吧！以XMLHttpReques以請求為例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function PromiseFn(method,url,async){
    return new Promise(function(resolve,reject){
        let xhr = new XMLHttpReques();
        xhr.open('method','url',async);
        xhr.send(null);
        xhr.onload = function(){
            if(xhr..readyState == 4){
                if(xhr.status == 200){
                    resolve(xhr.response);
                }else{
                    reject('失敗');
                }
            }
        }
    })
}

PromiseFn(GET,'https://raw.githubusercontent.com/kiang/pharmacies/master/json/points.json',true)
    .then((res)=>{
            var ajaxJSON = JSON.parse(res);
            console.log(ajaxJSON);
            console.log(res);
        })
        .catch((rej)=>{
            console.log(rej);
        })

這樣就可以調用這個函式，多次使用。


參考資料:
*JavaScript Promise 全介紹