走過路過, async + await 了解一下

async + await 是generator的語法糖,generator已經不直接用啦,所以你需要了解的,就是async + await !
(async + await = generator + co ,co庫,不了解的可以去github看看了解下~ 幾行源碼)

async 就是個promise, async函數可以直接.then((data)=>{ })

起步:

1. await必須結合async才能使用;

2. await后面可以跟任何數據,也可以跟同步方法或異步方法;

例子1:

async function fn(){
    console.log(0);
    await 1;
    console.log(1);
    await 2;
    console.log(2);
    await 3;
    console.log(3);
    return 4
}
fn().then((data) => {
    console.log('data', data)
})
// 打印:
// 0
// 1
// 2
// 3
// data 4

進階:

1. await后面跟著setTimeout等非promise寫的異步方法,那么async后面的then函數(若then函數里面是同步的), 則會先于await里面的異步方法執行,且async函數中,await后面非promise寫的異步方法,如果是接口這種異步,則返回的時間不定,異步流仍然不好控制,看例子2就會發現,awiat函數不是按照書寫順序執行的。(強調!因為下面用了promise會發現另一片天地!)

例子2:

async function fn(){
    console.log(0);
    await setTimeout(() => {console.log(200)}, 200);
    console.log(1);
    await setTimeout(() => {console.log(100)}, 100);
    console.log(2);
    await setTimeout(() => {console.log(50)}, 50);
    console.log(3);
    return 'done'
}
fn().then((data) => {
    console.log('data', data)
})
// 打印:
// 0
// 1
// 2
// 3
// data done
// 50
// 100
// 200

例子3: 在await 后面用了promise,會發現,異步流完全可控了!!!

async function fn(){
    console.log(0);
    let a = await new Promise((resolve) => {
        setTimeout(() => {resolve(200)}, 200)
    })
    console.log(1);
    console.log('a', a);
    let b = await new Promise((resolve, reject) => {
        setTimeout(() => {resolve(a + 1)}, 100)
    })
    console.log(2);
    console.log('b', b);
    let c = await new Promise((resolve, reject) => {
        setTimeout(() => {resolve(b + 1)}, 50)
    })
    console.log(3);
    console.log('c', c);
    return c
}
fn().then((data) => {
    console.log('data', data)
})
// 打印:
// 0
// 1
// a 200
// 2
// b 201
// 3
// c 202
// data 202

總結:
async + await 是為了讓書寫的異步流代碼能夠像同步代碼一樣,方便控制而產生的。await只有放在async函數里面才能使用,并且只有await后面跟著promise,才能夠真正起到控制異步流步驟的效果。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 異步編程對JavaScript語言太重要。Javascript語言的執行環境是“單線程”的,如果沒有異步編程,根本...
    呼呼哥閱讀 7,333評論 5 22
  • async 函數 含義 ES2017 標準引入了 async 函數,使得異步操作變得更加方便。 async 函數是...
    huilegezai閱讀 1,271評論 0 6
  • 含義 async函數是Generator函數的語法糖,它使得異步操作變得更加方便。 寫成async函數,就是下面這...
    oWSQo閱讀 2,005評論 0 2
  • 原文連接:https://blog.csdn.net/sinat_17775997/article/details...
    小豆soybean閱讀 4,277評論 0 7
  • 寫文章之前,我對著電腦屏幕發了半小時呆 此時方恨讀書少啊,實在不知道寫什么,可是又不想就此放棄。 根據以往的經驗,...
    二姐說育兒先育己閱讀 193評論 2 1