一、回調函數 優點:簡單,方便,易用 缺點:易造成回調函數地獄,回調函數中嵌套多個回調函數,因為多個非同步操作造成強耦合,代碼亂做一團,無法管理。 二、事件監聽 優點:與回調函數相比,事件監聽實現了代碼的解耦,方便代碼管理 缺點:使用不方便,每次都要手動地綁定和觸發事件 三、Promise 優點:將回 ...
一、回調函數
優點:簡單,方便,易用
缺點:易造成回調函數地獄,回調函數中嵌套多個回調函數,因為多個非同步操作造成強耦合,代碼亂做一團,無法管理。
var xhr1 = new XMLHttpRequest(); xhr1.open('GET', 'https://www.apiopen.top/weatherApi?city=廣州'); xhr1.send(); xhr1.onreadystatechange = function() { if(this.readyState !== 4) return; if(this.status === 200) { data1 = JSON.parse(this.response); var xhr2 = new XMLHttpRequest(); xhr2.open('GET', 'https://www.apiopen.top/weatherApi?city=番禺'); xhr2.send(); xhr2.onreadystatechange = function() { if(this.readyState !== 4) return; if(this.status === 200) { data2 = JSON.parse(this.response); console.log(data1, data2); } } } };
二、事件監聽
優點:與回調函數相比,事件監聽實現了代碼的解耦,方便代碼管理
缺點:使用不方便,每次都要手動地綁定和觸發事件
var events=new Events(); events.addEvent('done',function(data1){ var xhr=new XMLHttpRequest(); xhr.open('GET','請求地址') ; xhr.send(); xhr.onreadystatechange=function(){ if(this.readyState!==4) return; if(this.status===200){ data1=JSON.parse(data1); var data2=JSON.parse(this.response); console.log(data1,data2); } } }) var xhr=new XMLHttpRequest(); xhr.open('GET','請求地址‘’); xhr.send(); xhr.onreadystatechange=function(){ if(this.readyState!==4){ return; } if(this.status===200){ events.fireEvent('done,this.response) } }
三、Promise
優點:將回調函數嵌套調用變成了鏈式調用,邏輯更強,執行順序更清楚
缺點:代碼冗餘,非同步操作都被包裹在Promise構造函數和then方法中,主題代碼不明顯,語義不清楚
new Promise(function(resolve, reject) { const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.apiopen.top/weatherApi?city=廣州'); xhr.send(); xhr.onreadystatechange = function() { if(this.readyState !== 4) return; if(this.status === 200) return resolve(this.response); reject(this.statusText); }; }).then(function(value) { const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.apiopen.top/weatherApi?city=番禺'); xhr.send(); xhr.onreadystatechange = function() { if(this.readyState !== 4) return; if(this.status === 200) { const data1 = JSON.parse(value); const data2 = JSON.parse(this.response); console.log(data1, data2); } }; });
四、async/await
async函數是generrator函數的語法糖,它相當於一個自帶執行器的generator函數
async函數中的await接收一個Promise對象
優點:最簡潔,最符合語義,最接近同步代碼,最適合處理多個Promise非同步操作
缺點:js語言自帶的async執行器功能性可能沒有co模塊等執行器強
async function azc() { const data1 = await getJSON_PM('https://www.apiopen.top/weatherApi?city=廣州'); const data2 = await getJSON_PM('https://www.apiopen.top/weatherApi?city=番禺'); console.log(data1, data2); } azc(); function getJSON_PM(url) { return new Promise((resolve, rejext) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.responseType = "json"; xhr.setRequestHeader("Accept", "application/json"); xhr.send(); xhr.onreadystatechange = function() { if(this.readyState !== 4) return; if(this.status === 200) return resolve(this.response); reject(new Error(this.statusText)); }; }); }
參考鏈接:https://segmentfault.com/a/1190000018670042
http://es6.ruanyifeng.com/#do...