Promise的理解

函數對象和實例對象
實例對象：new 函數產生的對象
函數對象：將函數做爲對象使用

1.2二種回調函數
1.2.1 同步回調

理解：當即執行，徹底執行完了才結束，不會放入回調隊列中

eg：數組遍歷相關的回調函數 // Promise的excutor函數

const  arr = [1,3,5]
arr.forEach(item => { // 遍歷回調,同步
  console.log(item)
})
console.log(‘forEach()以後’)

1.2.2 異步回調

理解：不會當即執行，會放入回調隊列中未來執行

Eg：定時器回調 // ajax回調 / Promise的成功或失敗的回調

setTimeout(() => {  // 異步回調函數，會放入隊列未來執行
  console.log(‘setTimeout()’)
},0)
console.log(‘setTimeout()以後’)

Error
目標：進一步理解JS中的錯誤（Error）和錯誤處理

1. 錯誤的類型
   Error：全部錯誤的父類型

//1.常見的內置錯誤
1）ReferenceError：引用的變量不存在

console.log(a) // ReferenceError：a is not defined 。

//沒有捕獲error，下面的代碼不會執行
2）TypeError：數據類型不正確的錯誤

let b
console.log(b.xxx) //TypeError：cannot read property ‘xxx’ of undefined
b={}
b.xxx() //TypeError：b.xxx is not a function

3）RangeError：數據值不在其所容許的範圍內
function fn() {
fn()
}
fn() //RangeError：Maximum call stack size exceeded
4）SyntaxError：語法錯誤

1. 錯誤處理

捕獲錯誤：try...catch
try {
let d
console.log(d.xxx)
} catch (error) {
console.log(error.message)
conaole.log(error.stack)
}
拋出錯誤：throw error
function something() {
If (Date.now()%2===1) {

console.log(‘當前時間爲奇數，能夠執行’)

} else {

throw new Error(‘當前時間爲偶數，不可執行’)

}
}
//捕獲處理異常
try {
Something()
} catch (error) {
console.log(error.message)
}

1. 錯誤對象

message屬性：錯誤相關信息
stack屬性：函數調用棧記錄相關信息

Promise 的理解和使用
2.1 promise是什麼？
1.抽象表達：
Promise 是JS中進行異步編程的新的解決方案（舊的是誰？）

1. 具體表達：

（1）從語法上說：promise是一個構造函數
（2）從功能上說：promise對象用來封裝一個異步操做並能夠獲取其結果

2.1.2 promise的狀態改變

1. pending 變爲resolved
2. Pending變爲rejected

說明：只有2種，且一個promise對象只能改變一次，不管變成爲成功仍是失敗，都會有一個結果數據，成功的結果數據通常爲value，失敗的結果數據通常爲reason

2.1.3 promise的基本流程

2.1.4 promise的使用

//1.建立一個新的promise對象
const p = new Promise((resolve, reject) => { // 執行器函數
   // 2.執行異步操做任務
  setTimeout(() => {  // 異步回調函數，會放入隊列未來執行 
    const time = Date.now() // 若是當前時間是偶數就表明成功，不然失敗
   //3.1 若是成功，調用resolve（value）
   If (time%2 == 0) {
    resolve(‘成功的數據， time=’, + time)
   }  else {
   // 3.2 若是失敗，調用reject（reason）
    reject(‘失敗的數據， time=’, + time)
   }
 },1000)
})
p.then(
 value => { //接收到成功的value數據  onResolved
console.log(‘成功的回調’, value)
},
reason => {  //接收到失敗的reason數據  onReject
 console.log(‘失敗的回調’, reason)
})

1.如何改變Promise的狀態
（1） resolve（value）：若是當前是pending就會變爲resolved
（2） reject（reason）：若是當前是pending就會變爲rejected
（3） 拋出異常：若是當前是pending就會變爲rejected
2.一個promise指定多個成功/失敗回調函數，都會調用嗎？
當promise改變對應狀態時都會調用

var pp = new Promise((resolve, reject) => {
//resolve（1）//promise變爲resolved成功狀態
//rejected（2）// promise變爲rejected失敗狀態
 //throw new Error（‘出錯了’）// promise變爲rejected失敗狀態，reason爲拋出的error
  throw 3 // 拋出異常，promise變爲rejected失敗狀態，reason爲拋出的3
})
pp.then(
value => {},
reason => {console.log('reason', reason)}
)

3.改變Promise狀態和指定回調函數誰先誰後？
（1）都有可能，正常狀況下是先指定回調在改變狀態，但也能夠先改變狀態再指定回調
（2）如何先改變狀態再指定回調？
1）在執行器中直接調用resolve（）/reject（）
2）延遲更長時間再調用then
（3）何時才能獲得數據？
1）若是先指定的回調，那當狀態發生改變時，回調函數就會調用，獲得數據
2）若是先改變狀態，那當指定回調時，回調函數就會調用，獲得數據

// 1常規：先指定回調函數，後改變狀態
new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1) // 後改變的狀態（同時指定數據），異步執行回調函數
  },1000);
}).then( // 先指定回調函數，保存當前指定的回調函數
  resolve => {console.log('resolve', resolve)},
  reason => {console.log('reason', reason)}
)

// 2先改變狀態,後指定回調函數
new Promise((resolve, reject) => {
  resolve(2) // 先改變的狀態（同時指定數據）
}).then( // 後指定回調函數，異步執行回調函數
  resolve => {console.log('resolve2', resolve)},
  reason => {console.log('reason2', reason)}
)

// 3
var p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(3) // 後改變的狀態（同時指定數據），異步執行回調函數
  },1000);
})
setTimeout(() => {
  p.then( // 先指定回調函數，保存當前指定的回調函數
    resolve => {console.log('resolve3', resolve)},
    reason => {console.log('reason3', reason)}
  )
}, 1100)

4.Promise.then()返回的新Promise的結果狀態由什麼決定？
（1）簡單表達：由then（）指定的回調函數執行的結果決定
（2）詳細表達：

1）若是拋出異常，新Promise變爲rejected，reason爲拋出的異常
 2）若是返回的是非Promise的任意值，新Promise變爲resolved，value爲返回值,未返回則默認爲undefined
 3）若是返回的是另外一個新Promise，此Promise的結果就會成爲新Promise的結果

new Promise((resolve, reject) => {
  resolve(1)
}).then( 
  resolve => {console.log('onResolved1()', resolve)},
  reason => {console.log('onRejected1()', reason)}
).then( 
  resolve => {console.log('onResolved2()', resolve)},
  reason => {console.log('onRejected2()', reason)}
)

5.Promise如何串聯多個操做任務？
（1）Promise的then（）返回一個新的Promise，能夠當作then（）的鏈式調用
（2）經過then的鏈式調用串聯多個同步/異步任務

new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('執行任務1（異步）')
    resolve(1)
  },1000);
}).then(
  resolve => {
    console.log('執行任務1的結果：', resolve)
    console.log('執行任務2（同步）')
    return 2
  }
).then(
  resolve => {
    console.log('執行任務2的結果：', resolve)
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log('執行任務3（異步）')
        resolve(3)
      },1000);
    })
  }
).then(
  resolve => {
    console.log('執行任務3的結果：', resolve)
  }
)

6.Promise異常穿透？
（1）當使用Promise的then鏈式調用時，能夠在最後指定失敗的回調
（2）前面任何操做出現了異常，都會傳到最後失敗的回調中處理

new Promise((resolve, reject) => {
  rejected(1)
}).then( 
  resolve => {console.log('onResolved1()', resolve)},
  reason => {throw reason} // 可省略，即穿透
).then( 
  resolve => {console.log('onResolved2()', resolve)},
  reason => {throw reason} // 可省略，即穿透
).then( 
  resolve => {console.log('onResolved3()', resolve)},
  reason => {throw reason} // 可省略，即穿透
).catch(reason => {
  console.log('onRejected()', reason)
})

7.中斷Promise鏈？
（1）當使用Promise的then鏈式調用時，在中間中斷，再也不調用後面的回調函數
（2）辦法：在回調函數中返回一個pending狀態的Promise對象

new Promise((resolve, reject) => {
  rejected(1)
}).then( 
  resolve => {console.log('onResolved1()', resolve)}
).then( 
  resolve => {console.log('onResolved2()', resolve)}
).then( 
  resolve => {console.log('onResolved3()', resolve)}
).catch(reason => {
  console.log('onRejected()', reason)
  // throw reason
  // return Promise.rejected(reason)
  return new Promise(() => {}) //返回一個Pending的Promise中斷
}).then( 
  resolve => {console.log('onResolved4()', resolve)},
  reason => {console.log('onRejected4()', reason)}
)