ES6中Promise的入門(結合例子)

一、Promise的前言

解決回調地獄

//以往回調方式
函數1(function(){
    //代碼執行...(ajax1)
    
    函數2(function(){
        //代碼執行...(ajax2)
        
        函數3(function(data3){
              //代碼執行...(ajax3)
        });
        ...
    });
});

//Promise回調方式:鏈式調用,可構建多個回調函數。
//例如請求一個ajax之后,需要這個拿到這個ajax的數據去請求下一個ajax
promise().then().then()...catch()

當頁面邏輯復雜起來的時候,管理起來特別不容易。
為解決這種問題,CommonJS提出Promise概念.

• 從字意去理解:Promise表示一種承諾,它擁有由瀏覽器引擎提供的兩個函數:resolve和reject.通過具體情況調用相應的函數,然后再通過then寫上對應的回調函數。
• 從構建代碼理解:

//首先要創建Promise實例
let promise = new Promise( (resolve, reject) => {
    //執行相應代碼並根據情況調用resolve或reject
    ...
})

//在promise的then方法中執行回調
promise.then(function(){
        //第一個參數是返回resolve時,回調執行的函數
    },function(){
        //第二個是回調返回reject時,回調執行的函數
    }
}

解釋一下上面幾個概念:

• Promise: Promise有三個狀態:pending(等待)、resolve(完成)、 reject(拒絕)
  兩種狀態改變方式:pending => resolve, pending => reject
  在構建Promise實例調用resolve或reject就是狀態改變的時候。當狀態改變的時候,其方法then就會執行對應狀態的回調函數。

• resolve: then方法的第一個參數,通常作為事件成功的回調函數

• reject: then方法的第二個參數,通常作為事件失敗的回調函數,也可以作為catch的參數出現

二、Promise入門小例子

定時器調用

1. 最簡單的例子

const promise = new Promise(function(resolve, reject){
    setTimeout(resolve,1000);//1s后狀態變更為resolve,調用then方法的第一個參數
})

promise.then(function(){
  console.log('resolve:成功回調函數')  
},function(){
  console.log('reject:失敗回調函數')
})

2. 也可以寫成回調函數的方式,並把reject狀態的回調函數放到catch里

const promise = new Promise((resolve, reject) => {
    setTimeout(reject,1000);
})

promise.then( () => {
    console.log('resolve:成功回調函數')
}).catch(() => {
    console.log('reject:失敗回調函數')
})

3. 請求事件通常會附帶數據給回調函數。要傳遞參數,只需要附帶在函數后面即可
   注意!傳多個數據需要通過數組傳遞

const promise = new Promise((resolve, reject) => {
    setTimeout(reject,1000,'我是value值');
})

promise.then((value) => {
    console.log('resolve:' + value)
}).catch((value) => {
    console.log('reject:'+ value)
})

傳多個參數➡

//第一種,可以看到單個傳值是無效的
const promise = new Promise((resolve, reject) => {
    setTimeout(resolve,1000,'參數1','參數2');
})

promise.then((value1,value2) => {
    console.log('value1:' + value1)     //value1:參數1
    console.log('value2:' + value2)     //value2:undefined
}).catch((value) => {
    console.log(value)
})

//第二種:數組傳值
const promise = new Promise((resolve, reject) => {
    setTimeout(resolve,1000,['參數1','參數2']);
})
promise.then((value1) => {
    console.log('value1:' + value1)     //value1:參數1,參數2
}).catch((value) => {
    console.log(value)
})

以上就是我對Promise的理解啦!是一些Promise入門的簡單知識點.
想深入了解的話可以看看阮一峰老師的《ES6入門》:
http://es6.ruanyifeng.com/#docs/promise