es6中Promise多個then的使用方法

promise是構造函數 一般打印大寫的就是構造函數，所以用new 得到一個promise實例

promise是為了解決回調地獄問題的。回調地獄就是ajax一層套一層 特別多

then方法是在promise構造函數的prototype屬性上，所以說，只要是promise創建的實力，都可以訪問到then方法

promise表示一個異步操作，每當我們new一個promise實例，這個實例就表示一個具體的異步操作

既然他是異步操作，所以異步操作結果只能有兩種狀態 成功和失敗

異步操作無法使用return把結果返回給調用者，只能使用回調函數的形式，將結果返回給調用者

 

應用場景：

我們有一個A方法ajax方法獲得用戶信息，我們還有一個B方法是馬上要使用用戶信息，當兩個方法同時調用時候，我們無法判別B方法已經拿到A方法的ajax獲取的用戶信息，基於這樣的需求，我們急需一個能讓他們按照A->B的順序同步執行的東西。

解決辦法：

es6的Promise對象是可以實現同步操作的，這解決了ajax請求想同步按照順序執行的問題。

在后面每個then的時候，我們需要返回Promise對象才可以一直then調用，我們可以直接

return new Promise(response => {
   response({ name: "第2個傳的值" })
});

也可以使用Promise提供的方法

 return Promise.resolve({ name: "第3個傳的值" });

使用return new Promise方式無限調用then：

new Promise((resolve, reject) => {
    console.log(1)
    resolve({
        name: "第1個傳遞的值"
    });
}).then((result) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(2, result)
            resolve({
                name: "第2個傳遞的值"
            })
        }, 1000)
    })
}).then((result) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(3, result)
            resolve({
                name: "第3個傳遞的值"
            })
        }, 1000)
    })
}).then((result) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(4, result)
            resolve({
                name: "第4個傳遞的值"
            })
        }, 1000)
    })
}).then((result) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(5, result)
        }, 1000)
    })
})

 

 

 除了上面的方式，還可以使用promise.all方法來實現：

var p1 = new Promise((resolve, reject) => {
      console.log(1)
      resolve()
    })
    var p2 = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(2)
        resolve()
      }, 1000);
    })
    var p3 = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(3)
        resolve()
      }, 1000);
    })
 
    Promise.all([p1, p2, p3]).then((result) => {
      console.log("執行完畢");
    })

 

 

1. var p1 = new Promise( (resolve, reject) => {
2.  
   console.log( 1)
3.  
   resolve()
4.  
   })
5.  
   var p2 = new Promise( (resolve, reject) => {
6.  
   setTimeout( () => {
7.  
   console.log( 2)
8.  
   resolve()
9.  
   }, 1000);
10.  
    })
11.  
    var p3 = new Promise( (resolve, reject) => {
12.  
    setTimeout( () => {
13.  
    console.log( 3)
14.  
    resolve()
15.  
    }, 1000);
16.  
    })
17.  
     
18.  
    Promise.all([p1, p2, p3]).then( (result) => {
19.  
    console.log( "執行完畢");
20.  
    })