js異步編程-async,await以及不能夠取代的Promise

ES7帶來了async和await,讓js的異步編程更加方便。編程

async和await的簡單語法實驗

async和await是Promise的語法糖,讓書寫更加方便。可是他們是取代不了Promise的。他們是創建在promise機制上的。
簡單語法試驗:
(1)
正常狀況下,能夠看出也打印出來一個Promise。其中Promise狀態是‘resolved’;
圖片描述promise

(2)
這種狀況下,看出Promise狀態是'rejected'。並報錯,不想報錯「紅錯」,可使用try...catch
圖片描述
(3)
將報錯信息catch到。
圖片描述併發


async,await簡介

async
async是用來表示函數是異步的,出現async,會返回一個Promise對象,就可使用then方法,方便的添加回調函數了。是語法更加簡潔。dom

await
必須出如今async中,不可單獨使用;
await後面能夠跟任何js表達式,也就是awati能夠等不少類型的東西,但主要是等Promise對象被狀態被resolved。異步


小示例

注意:reject('123'),須要try,catch才能將信息拿出來。
例子:
(1)resolve正常狀況下能夠拿出。
圖片描述async

(2)reject拿不出
圖片描述
(3)reject須要用try,catch獲取信息
圖片描述異步編程


不要將併發請求發成了阻塞式同步

如:函數

function aa(second){spa

return new Promise((resolve,reject) => {
    setTimeout(() => {
        resolve('request done'+Math.random());
    },second);
})

}code

async function bugDemo(){

await aa(1000);
await aa(1000);
await aa(1000);
console.log('clear the loading~');

}

bugDemo();

不阻塞的寫法
function aa(second){

return new Promise((resolve,reject) => {
    setTimeout(() => {
       console.log('request done'+Math.random());
    },second);
})

}
async function bugDemo(){

let a =aa(1000);
let b =aa(1000);
let c =aa(1000);
await Promise.all([a,b,c])
console.log('clear the loading~');

}
bugDemo();

注意:await只能在async函數的上下文中。
async function forDemo(){

let arr = [1,2,3,4,5];
   for(let i=0;i<arr.length;i++){

await arr[i];
}
}
這個是正常的,不會報錯。

async function forBugDemo(){let arr = [1,2,3,4,5];arr.forEach(item => {await item;});}這個會報錯

相關文章
相關標籤/搜索