深刻理解Promise/ajax

Promise 對象特色

1. 對象的狀態不受外界影響。Promise對象表明一個異步操做，有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。只有異步操做的結果，能夠決定當前是哪種狀態，任何其餘操做都沒法改變這個狀態。
   
2. 一旦狀態改變，就不會再變，任什麼時候候均可以獲得這個結果。Promise對象的狀態改變，只有兩種可能：從pending變爲fulfilled和從pending變爲rejected。只要這兩種狀況發生，狀態就凝固了，不會再變了，會一直保持這個結果，這時就稱爲 resolved（已定型）。若是改變已經發生了，你再對Promise對象添加回調函數，也會當即獲得這個結果。

Promise缺點

1. 沒法取消promise,一旦新建它會當即執行，沒法中途取消。
2. 若是不設置回調函數，promise內部拋出的錯誤，不會反應到外部
3. 當處於pending 狀態時，沒法得知目前進展到那一階段。

原生ajxa/promise

// 0 未初始化未調用open // 1.啓動 調用open 未調用 send // 2. 發送 已調用send() 可是未響應 // 3. 接收 已經接收部分響應數據 // 4.完成 完成所有數據響應 const ajax = function (params) { if (!params.url) return; const promise = new Promise((resolve, reject) => { const handler = function () { if (this.readyState !== 4) return if (this.status == 200) { resolve(this.responseText) } else { reject(this.statusText) } } const xhr = new XMLHttpRequest() if (params.method.toLowerCase() == 'get') { xhr.open('get', url + '?' + formatParams(params.data)); xhr.send() } else { xhr.open('post', url); xhr.send(JSON.stringify(params.data)); } xhr.onreadystatechange = handler xhr.responseType = 'json' xhr.setRequestHeader('Accept', 'application/json'); }) return promise function formatParams(obj) { if (!data) return var arr = [] for (let i in obj) { arr.push(`${encodeURIComponent(i)}=${encodeURIComponent(obj[i])}`) } return arr.join('&') } }













複製代碼