JavaScript異步與Promise基本用法(resolve與reject)

 

 

 

Promise的基本用法

new Promise( function(resolve, reject) {...} ); //reject參數 可不選

executor

executor是帶有 resolve 和 reject 兩個參數的函數 。Promise構造函數執行時立即調用executor 函數， resolve 和 reject 兩個函數作為參數傳遞給executor（executor 函數在Promise構造函數返回新建對象前被調用）。resolve 和 reject 函數被調用時，分別將promise的狀態改為fulfilled（完成）或rejected（失敗）。executor 內部通常會執行一些異步操作，一旦完成，可以調用resolve函數來將promise狀態改成fulfilled，或者在發生錯誤時將它的狀態改為rejected。
如果在executor函數中拋出一個錯誤，那么該promise 狀態為rejected。executor函數的返回值被忽略。

對更多對Promise的描述感興趣的可以 點擊查看MDN Promise下面我們開始上代碼

let promise = new Promise((resolve, reject) = > {
    setTimeout(() = > {
        let random = Math.random()
        if (random > 0.5) {
            resolve(`resolve$ {random}`)
        } else {
            resolve(`reject$ {random}`)
        }
    }, 1000)
})

由上所示，Promise的構造函數接收一個函數作為參數，該函數接受兩個額外的函數，resolve和reject，這兩個函數分別代表將當前Promise置為fulfilled(已成功)和rejected(已失敗)兩個狀態。Promise正是通過這兩個狀態來控制異步操作的結果。接下來我們將討論Promise的用法，實際上Promise上的實例promise是一個對象，不是一個函數。在聲明的時候，Promise傳遞的參數函數會立即執行，因此Promise使用的正確姿勢是在其外層再包裹一層函數。

let run = function() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
        let random = Math.random()
        if (random > 0.5) {
            resolve(`resolve:${random}`)
        } else {
            reject(`reject:${random}`)
        }
    }, 1000)
})
}

run()

run().then(
function(value) {
    console.log(value)
})

每個Promise的實例對象，都有一個then的方法，這個方法就是用來處理之前各種異步邏輯的結果。

then方法可以接受兩個回調函數作為參數。第一個回調函數是Promise對象的狀態變為resolved時調用，第二個回調函數是Promise對象的狀態變為rejected時調用。其中，第二個函數是可選的，不一定要提供。這兩個函數都接受Promise對象傳出的值作為參數。
下面是一個用Promise對象實現的 Ajax 操作的例子:

var promise = new Promise(function(resolve,reject){
            $.ajax({
                url:'/api/poisearch.json',
                method:'get',
                datatype:'json',
                success:(res) =>{
                    resolve(res)
                },
                error:(err)=>{
                    reject(err)
                }
            });
        });

        promise.then(function(res){
            return res.data
        }).then(function(data){
            return data.result;
        }).then(function(result){
            console.log(result)
        });

        //推薦使用箭頭函數簡寫成,極大提升了代碼的簡潔性和可讀性
        promise.then(res => res.data).then(data => data.result).then(result => console.log(result));

 

參考

https://blog.csdn.net/qq_42911663/article/details/85790181

https://www.cnblogs.com/mark5/p/11925879.html