ES6(2015)

異步解決方案 Promise

ES5 回調 callback

function load (src,callback){
    let script = document.creatElement('script')
    script.src = src // 次操作 是 引擎默認的異步
    script.onload = () => { callback(src) }
    document.head.append(script)
}
load('./1.js',test)

function test(name){
    console.log(name)
}
test('tt')  // 先執行test() 后執行 load()

load('./1.js',function(st){
     load('./2.js',function(st){
         load('./3.js',test(st))
     })
}) // 嵌套回調 回調地獄

ES6 promise

function load(src){
    return new Promise((resolve,reject) =>{
        let script = document.creatElement('script')
    	script.src = src 
        script.onload = () => resolve(src)
        script.onerror = (err) => reject(err)
        document.head.append(script)
    })
}
load(./1.js)
    .then(()=>{return load(./2.js)},(err)=>{console.log(err)})
    .then(()=>{return load(./3.js)},(err)=>{console.log(err)})  // 平行調用

Promise 對象 基本原理

new Promise()  // 會有 pending 狀態 掛起
resolve() // 會有 fulfilled 狀態 
reject() // 會有 rejected 狀態 狀態互斥

多個異步調用,逐個調用 .then()

語法 : promise.then(onFulfilled,onRejected) 傳入 兩個函數

如果不是函數 將會是一個空的Promise對象.

// 期望 load 1 2 3 順序執行, 一步報錯 后續停止執行 
// 正規寫法
load(./1.js)   //返回 新的 Promisee對象 調去then
    .then(()=>{return load(./2.js)},(err)=>{console.log(err)}) // 使用 load1 結果的 promise
    .then(()=>{return load(./3.js)},(err)=>{console.log(err)}) // 使用 loda2 結果的 promise
// 不正規 但可執行  
load(./1.js) 
    .then(load(./2.js)) // 使用 laod1 結果的 promise
    .then(load(./2.js))  // 使用 空的promise ,因為 上次調用不符合 語法規定
// 不正規 但可執行
load(./1.js)   
    .then(()=>{load(./2.js)},(err)=>{console.log(err)}) // 使用 load1 結果的 promise
    .then(()=>{load(./3.js)},(err)=>{console.log(err)}) // 使用 空的promise ,因為,上次then沒有返回任何值 
// 后2種 一旦 load2 報錯. load3 還會執行. 是錯誤的結果.
// 第1中 一旦 load2 報錯. 將會阻斷 laod3 的執行 . 是期望的結果.

返回值不是異步請求,而是同步的結果 .resolve() .reject()

語法: Promise.resolve(value) Promise.reject(new Error())

注意 是 靜態方法 Promise類直接調用的 類方法

function test(key){
    if(key){
        return new Promise((resolve,reject)=>{
            resolve(30)
        })
    } else if(key ===2){
        // retrun 42 會使 調用鏈斷掉, 所以 使用 靜態方法 resolve 處理正常信息使其繼續調用下個then
        return new Promise.resolve(42)
    }else {
        // retrun new Error  會使 調用鏈斷掉.所以 使用一個 靜態方法 reject 來處理錯誤 阻斷下次調用
        return new Promise.reject(new Error('sssss'))
    }
}
test(0).then((value) =>{console.log(value)},(err) => {console.log(err)})

捕獲錯誤,并統一處理 .catch()

load(./1.js)
    .then(()=>{ return load(./2.js)}) // 第二個 reject 函數沒有寫
 	.then(()=>{ return load(./3.js)})
	.catch(err => console.log(err))  // 避免每次都寫 reject 方法

并行異步調用:最后一個調用結束再執行.all()

const p1 = load(./1.js)
const p2 = load(./2.js)
const p3 = load(./3.js)
// 3個異步 不論調用快慢 最后全掉用完 就會執行
Promise.all([p1,p2,p3]).then(value =>{console.log(value)}) 

競爭異步調用:第一個調用結束就執行.race()

const p1 = load(./1.js)
const p2 = load(./2.js)
const p3 = load(./3.js)
// 3個異步 只執行 最快的那個
Promise.race([p1,p2,p3]).then(value =>{console.log(value)})