前端常見面試題之async/await和promise的區別

Posted on by

async

async函數定義

async函數是使用關鍵字聲明的函數。async 是“異步”的簡寫，所以應該很好理解 async 用於申明一個 function 是異步的。

作用

用於解決：異步程序產生的bug

####async函數的語法

async function name([param[, param[, ... param]]]) {
    statements 
}

參數：name 函數名稱

​ param 要傳遞給函數的參數的名稱

​ statements 包含函數主體的表達式 ，可以使用await

返回值： 一個全新的promise，這個promise要麼會通過一個由async函數返回的值被解決，要麼會通過一個從async函數中拋出的（或其中沒有被捕獲到的）異常被拒絕

下面為async的具體使用實例：

 async function foo(p) {
        console.log("foo run",p);
        return 1;
      }
      var res = foo(1);
      console.log(res);//{<fulfilled>: 1}

async函數一定會返回一個promise對象。如果一個async函數的返回值看起來不是promise，那麼它將會被隱式地包裝在一個promise中。

例如，如下代碼:

async function foo() {
     //promise.[[promiseValue]] 
   return 1
}
//等價於
function foo() {
   return Promise.resolve(1)
}//{<fulfilled>: 1}

下面是對async的一些補充：

  • async 本身是一個語法糖—>語法糖：帶有一定功能的關鍵字
    • 語法糖的作用：能夠減少代碼量、增加程序的可讀性，從而減少程序代碼出錯的機會

async 函數中 return 值如何接受

方式一

通過 promise.then-cb 形參獲取

 async function foo(){
            console.log(222222);
            return 123;
        }
let res = foo();
 res.then(data=>{
            console.log(data);//123
        })

方式二

第二種接受函數返回值的方式是 await

  (async function (){
           console.log('async run');
           //第二種接受函數返回值的方式是 await
           let res = await foo();
           console.log(res);
       })()
 async function foo(){
           console.log('foo run');
           return 123;  
       }
 //res作用：接受 async foo函數返回值 是promise
let res = foo();

await

await定義

await 的意思是等待，所以應該很好理解，await 等待某個操作完成。

作用

await關鍵字的作用 就是獲取 Promise中返回的內容， 獲取的是Promise函數中resolve或者reject的值（await 作用是獲取promise.[[promiseValue]]的值）

關於await的註意點

  • await 必須寫在 async 中
  • await 後是一個promise實例對象

[[promiseValue]]

[[PromiseValue]]是個內部變量，外部無法得到，隻能在then中獲取。

[promiseValue]哪些能賦值

  • async函數的return
  • new promise 中 resolve實參
  • then 中 return （catch finally 中的return）
  • promise.reslove()實參 promise.reject()實參

三者的區別

  • promise和 async/await都是解決異步編程的一種方式，但是async/await使得異步代碼看起來像同步代碼。
  • 函數前面多瞭一個async關鍵字。await關鍵字隻能用於async定於的函數內。async函數會隱式地返回一個Promise,該promise的resolve值就是return的值。

為什麼async/await更好？

使用async函數可以讓代碼簡潔很多，不需要像Promise一樣需要then,不需要寫匿名函數處理Promise的resolve的值，也不需要定義多餘的data變量，還避免瞭嵌套代碼。

async/await 讓 try/catch可以同時處理同步和異步的錯誤。在下面的示例中，try/catch不能處理JSON.parse的錯誤，因為它在Promise中,我們需要使用.catch,這樣的錯誤會顯得代碼非常的冗餘。

總結

到此這篇關於前端常見面試題之async/await和promise區別的文章就介紹到這瞭,更多相關async/await和promise區別內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：