async-await

async，await和promise並不衝突，能夠是promise的擴展

一、then只是將callback拆分了(之前callbak的也是函數，只不事後面能夠拆分了，組件化了)

 

function waitHandle(){
　　var dtd = $.Deferred(); // 建立一個deferred對象

　　var wait = function(dtd){ // 要求傳入一個 deferred對象
　　　　var task = function(){
　　　　　　console.log('執行完成');
　　　　　　dtd.resolve(); // 表示異步任務已經完成
　　　　　　// dtd.reject(); // 表示異步任務失敗或出錯
　　　　}
　　　　setTimeout(task, 2000);
　　　　return dtd.promise(); // 這裏返回promise，而不是直接反悔deferred
　　}

　　// 注意，這裏必定要有返回值
　　return wait(dtd);
}

var w = waitHandle();
w.then(function(){
　　console.log('ok1')
},function(){
　　console.log('error1')
}).then(function(){
　　console.log('ok2')
},function(){
　　console.log('error2');
})

 

 

二、aysnc/await是最直接的同步寫法（執行的順序跟寫法同樣）

 

import 'babel-polyfill';
function loadImg(src) {
　　const promise = new Promise(function (resolve, reject) {
　　　　var img = document.createElement('img');
　　　　img.onload = function(){
　　　　　　resolve(img);
　　　　}
　　　　img.onerror = function(){
　　　　　　reject();
　　　　}
　　　　img.src = src;
　　})
　　return promise;
}

const load = async function(){
　　const result1 = await loadImg('xxx.png');
　　console.log(result1);
　　const result2 = await loadImg('yyy.png');
　　console.log(result2);
}
load();

 

用法

一、使用await，函數必須用async標識

二、await後面跟的是一個Promise實例

三、須要babel-polyfill(兼容的意思)

npm i --save-dev babel-polyfill

 

總結

一、使用了Promise,並無和Promise衝突

二、徹底是同步的寫法，再也沒有回調函數

三、可是：改變不了js單線程、異步的本質