es6 關乎promise

1.promise是幹嘛的？

promise是異步程式設計的一種解決辦法

什麼情況下會用到promise？

要用到異步操作的時候

2.promise簡單使用過程(第一種寫法)

//鍊式程式設計
    //Promise在建立時要傳入一個函數
      new Promise((resolve, reject) => {     //resolve,reject也是函數
        //這裡寫第一次請求的代碼
        resolve('hello promise')
        //成功後調用resolve()  一旦我們調用了resolve函數，就會調用then  then（然後，下一步）  then也是個函數 resolve可傳參  .then能接收到
        reject('error')
        //失敗後調用reject()  一旦調用了reject  就會調用  catch()
    }).then((data) => {
        //第一次拿到結果後處理的代碼
        return new Promise((resolve, reject) => {
            //第二次請求的代碼
            resolve()
        })
    }).then(() => {
            //第二次拿到結果後處理的代碼
    }).catch((err) => {
       console.log(err)
    })

           

3.promise的三種狀态

• pending：等待狀态比如 正在進行網絡請求 計時器時間沒到
• fulfill：滿足狀态，當我們主動回調了resolve時就會處于該狀态 回調.then
• reject：拒絕狀态，當我們主動回調了reject時就會處于該狀态 回調.catch

4.第二種寫法

new Promise((resolve,reject) =>{
    resolve()
    reject()
}).then(data =>{
    //成功
},err =>{
    //失敗
})
           

5.resolve簡寫

new Promise((resolve, reject) => {
        resolve(res)
    }).then( res => {
       return Promise.resolve(res+"111")
    }).then(res => {
       return Promise.resolve(res+"222")
    })
           

new Promise((resolve, reject) => {
        resolve()
    }).then(data => {
       return data+"111"
    }).then(res => {
        return res+"222"
    })
           

6.reject簡寫

new Promise((resolve, reject) => {
    resolve()
}).then(data => {
   return Promise.reject('error')
}).then(res => {
    return res+"222"
}).catch(err => {
    console.log(err)
})
           

new Promise((resolve, reject) => {
        resolve()
}).then(data => {
        throw  'error'   //手動抛出異常
}).then(res => {
        return res+"222"
}).catch(err => {
        console.log(err)
})
           

7.promise all

Promise.all([  //裡面是數組
    new Promise((resolve, reject) =>{
        $ajax({
            url:'url1',
            success(data){
                resolve(data)
            }
        })
    }),
    new Promise((resolve, reject) =>{
        $ajax({
            url:'url2',
            success(data){
                resolve(data)
            }
        })
    }).then(results =>{   //results是數組
        results[0]  //第一個ajax得到的值
        results[1]  //第二個ajax得到的值
    })
])