React native 之 async/await

參考資料 ：https://www.jianshu.com/p/1e75bd387aa0

要點：

1. async function(){} 將普通函數轉換成Promise

2. await 表達式/函數 強制等待后面的結果返回再繼續

3. await 只能用在async function(){}中 ，用在普通函數中會報錯

 

 

async function add1(x){ 
　　let a =1;
　　return x+a;
} 
add1(10)
Promise {<resolved>: 11}

async聲明add1是一個Promise,執行函數，可以看出

add1(10)的返回值是一個resoved的Promise

function pm(){
    return new Promise((resolve,reject)=>{
        resolve('1')
})

};

async function test(){
    let a = await pm();
    let b = await '2';
    console.log(a)
    console.log(b)
    return a+b;
}

test()
 1 2
Promise {<resolved>: "12"}

 

4. 報錯處理：最好把await 放入try ... catch ... 中

function timeout(ms) {

  return new Promise((resolve, reject) => {

    setTimeout(() => {reject('error')}, ms);  //reject模擬出錯，返回error

  });

}

async function asyncPrint(ms) {

  try {

     console.log('start');

     await timeout(ms);  //這里返回了錯誤

     console.log('end');  //所以這句代碼不會被執行了

  } catch(err) {

     console.log(err); //這里捕捉到錯誤error

  }

}

asyncPrint(1000);

 

下面這種方法也可以：

function timeout(ms) {

  return new Promise((resolve, reject) => {

    setTimeout(() => {reject('error')}, ms);  //reject模擬出錯，返回error

  });

}

async function asyncPrint(ms) {

  console.log('start');

  await timeout(ms)

  console.log('end');  //這句代碼不會被執行了

}

asyncPrint(1000).catch(err => {

    console.log(err)； // 從這里捕捉到錯誤

});

如果想讓

 console.log('end'); 

繼續執行，那么可以提前cathc錯誤

function timeout(ms) {

  return new Promise((resolve, reject) => {

    setTimeout(() => {

        reject('error')

    }, ms);  //reject模擬出錯，返回error

  });

}

async function asyncPrint(ms) {

  console.log('start');

  await timeout(ms).catch(err => {  // 注意要用catch

console.log(err) 

  })

  console.log('end');  //這句代碼會被執行

}

asyncPrint(1000);

 

應用場景：

當出現多個await 時，如果不存在依賴關系，可以用Promise.all() 並發處理，速度要比一直等待快。

 

function test1 () {
    return new Promise((resolve, reject) => {

        setTimeout(() => {

            resolve(1)

        }, 1000)

    })

}

function test2 () {

    return new Promise((resolve, reject) => {

        setTimeout(() => {

            resolve(2)

        }, 2000)

    })

}

async function exc1 () {

    console.log('exc1 start:',Date.now())

    let res1 = await test1();

    let res2 = await test2(); // 不依賴 res1 的值

    console.log('exc1 end:', Date.now())

}

async function exc2 () {

    console.log('exc2 start:',Date.now())

    let [res1, res2] = await Promise.all([test1(), test2()])

    console.log('exc2 end:', Date.now())

}

exc1();

exc2();