js中的Promise與流程控制和異步

js中的Promise與流程控制和異步

• ES6開始支持。

• Promise對象用於一個異步操作的最終完成(包括成功和失敗)及結果值的表示。

• 簡單說，就是處理異步請求的。之所以叫做Promise，就是承諾，如果成功則怎麼處理，失敗則怎麼處理。

• 語法：

//語法
new Promise(
    /* 下面定義的函數是executor*/
    function(resolve,reject){...}
);

1. executor
   • executor是一個帶有resolve和reject兩個參數的函數。
   • executor函數在Promise構造函數執行時立即執行，被傳遞resolve和reject函數(executor函數在Promise構造函數返回新建對象前被調用)。
   • executor內部通常會執行一些異步操作，一旦完成。可以調用resolve函數來將promise狀態改成fulfilled即完成，或者在發生錯誤時將它的狀態改爲rejected即失敗。
   • 如果在executor函數中拋出一個錯誤，那麼該promise狀態爲rejected。executor函數的返回值被忽略
   • executor中，resolve或reject只能執行其中一個函數
2. Promise的狀態
   • pending:初始狀態，不是成功或失敗狀態。
   • fulfilled:意味着操作成功完成。
   • rejected:意味着操作失敗。
3. Promise.then(onFulfilled,onRejected)
   • 參數是2個函數，根據Promise的狀態來調用不同的函數，fulfilled走onFulfilled函數，rejected狀態走onRejected函數。fulfilled狀態走onFulfilled函數。
   • then的返回值是一個新的promise對象，執行任意一個函數，對這個promise對象來說就是其返回值。
   • 調用任何一個函數後，其返回值都可以被後續的then方法繼續捕捉。
4. catch(onRejected)
   • 爲當前Promise對象添加一個拒絕回調，返回一個新的Promise對象
5. Promise提供2個方法：
   1. Promise.resolve(value)返回 狀態爲fulfilled狀態的Promise對象
   2. Promise.reject(reason)返回 狀態爲rejected狀態的Promise對象

function fun(resolve,reject){
    //resolve('hello')
    console.log('------------')
    reject('world')
}
var myPromise = new Promise(fun);

console.log(myPromise);

//消息處理
var p1 = myPromise.then(
    /*如果成功則顯示結果*/
    (value) => console.log(1,myPromise,value),
    /*失敗則顯示原因 */
    (reason) => console.log(2,myPromise,reason)
)

//處理後消息可以繼續傳遞
const resolve = (value)=>console.log(3,p1,value);
const reject = (reason)=>console.log(4,p1,reason);
var p2 = p1.then(resolve,reject);

// 繼續傳遞消息
p2.then(
    value => {
        console.log(5,p2,value);
        return Promise.reject('p2 rejected') //重新改變狀態 rejected
    },
    reason => console.log(6,p2,reason)
).catch(//如果狀態是rejected就進入
    reason =>{
        console.log(7,reason);
        return Promise.resolve(reason + '* ');// 重新改變狀態resolved
    }
).then(
    value => console.log(8,value),//處理
    reason => console.log(9,reason)
)

異步實例

function runAsync(fun){
    return new Promise(function(resolve,reject){
        //異步操作
        setTimeout(function(){
            console.log('do sth..');
            resolve('ok....')
        },3000);
    });
}

//調用
runAsync().then(
    value =>{
        console.log(value);
        return Promise.reject(value + '*');
    }
).catch(
    reason => {
        console.log(reason);
        return Promise.resolve(reason + '*');
    }
).then(
    value => {
        console.log(value);
        console.log('Promise END');
    }
)

console.log('=====FIN==========')