“约见”面试官系列之常见面试题第一篇说说promise（建议收藏）
目錄
1前言
2promise是什么？
2.1舉例說明
3異步操作的常見語法
3.1事件監聽
3.2回調
4異步回調的問題：
5promise詳解
6最簡單示例：
1前言
這是來自江蘇某公司的初級面試題之一
歡迎大家作為補充
為了本題的完善
2promise是什么？
1、主要用于異步計算
2、可以將異步操作隊列化，按照期望的順序執行，返回符合預期的結果
3、可以在對象之間傳遞和操作promise，幫助我們處理隊列
2.1舉例說明
-
同步：假設你去了一家飯店，找個位置，叫來服務員，這個時候服務員對你說，對不起我是“同步”服務員，我要服務完這張桌子才能招呼你。那桌客人明明已經吃上了，你只是想要個菜單，這么小的動作，服務員卻要你等到別人的一個大動作完成之后，才能再來招呼你，這個便是同步的問題：也就是“順序交付的工作1234，必須按照1234的順序完成”。
-
異步：則是將耗時很長的A交付的工作交給系統之后，就去繼續做B交付的工作，。等到系統完成了前面的工作之后，再通過回調或者事件，繼續做A剩下的工作。
AB工作的完成順序，和交付他們的時間順序無關，所以叫“異步”。
3異步操作的常見語法
3.1事件監聽
document.getElementById('#start').addEventListener('click', start, false); function start() {// 響應事件，進行相應的操作 } // jquery on 監聽 $('#start').on('click', start)3.2回調
// 比較常見的有ajax $.ajax('http://www.wyunfei.com/', {success (res) {// 這里可以監聽res返回的數據做回調邏輯的處理} })// 或者在頁面加載完畢后回調 $(function() {// 頁面結構加載完成，做回調邏輯處理 })有了nodeJS之后...對異步的依賴進一步加劇了
大家都知道在nodeJS出來之前PHP、Java、python等后臺語言已經很成熟了，nodejs要想能夠有自己的一片天，那就得拿出點自己的絕活：
無阻塞高并發，是nodeJS的招牌，要達到無阻塞高并發異步是其基本保障
舉例：查詢數據從數據庫，PHP第一個任務查詢數據，后面有了新任務，那么后面任務會被掛起排隊；而nodeJS是第一個任務掛起交給數據庫去跑，然后去接待第二個任務交給對應的系統組件去處理掛起，接著去接待第三個任務...那這樣子的處理必然要依賴于異步操作
4異步回調的問題：
- 之前處理異步是通過純粹的回調函數的形式進行處理
- 很容易進入到回調地獄中，剝奪了函數return的能力
- 問題可以解決，但是難以讀懂，維護困難
- 稍有不慎就會踏入回調地獄 - 嵌套層次深，不好維護
一般情況我們一次性調用API就可以完成請求。
有些情況需要多次調用服務器API，就會形成一個鏈式調用，比如為了完成一個功能，我們需要調用API1、API2、API3，依次按照順序進行調用，這個時候就會出現回調地獄的問題
5promise詳解
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><script>new Promise(function(resolve, reject) {// 一段耗時的異步操作resolve('成功') // 數據處理完成// reject('失敗') // 數據處理出錯}).then((res) => {console.log(res)}, // 成功(err) => {console.log(err)} // 失敗)</script> </body></html>運行結果
- resolve作用是，將Promise對象的狀態從“未完成”變為“成功”（即從 pending 變為 resolved），在異步操作成功時調用，并將異步操作的結果，作為參數傳遞出去；
reject作用是，將Promise對象的狀態從“未完成”變為“失敗”（即從 pending 變為 rejected），在異步操作失敗時調用，并將異步操作報出的錯誤，作為參數傳遞出去。 - promise有三個狀態：
1、pending[待定]初始狀態
2、fulfilled[實現]操作成功
3、rejected[被否決]操作失敗
當promise狀態發生改變，就會觸發then()里的響應函數處理后續步驟；
promise狀態一經改變，不會再變。 - Promise對象的狀態改變，只有兩種可能：
從pending變為fulfilled
從pending變為rejected。
這兩種情況只要發生，狀態就凝固了，不會再變了。
6最簡單示例：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><script>new Promise(resolve => {setTimeout(() => {resolve('hello')}, 2000)}).then(res => {console.log(res)})</script> </body></html>?運行結果
分兩次，順序執行
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><script>new Promise(resolve => {setTimeout(() => {resolve('hello')}, 2000)}).then(val => {console.log(val) // 參數val = 'hello'return new Promise(resolve => {setTimeout(() => {resolve('world')}, 2000)})}).then(val => {console.log(val) // 參數val = 'world'})</script> </body></html>運行結果
promise完成后then()
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><script>let pro = new Promise(resolve => {setTimeout(() => {resolve('hello world')}, 2000)})setTimeout(() => {pro.then(value => {console.log(value) // hello world})}, 2000)</script> </body></html>結論：promise作為隊列最為重要的特性，我們在任何一個地方生成了一個promise隊列之后，我們可以把他作為一個變量傳遞到其他地方。
本面試題為前端常考面試題，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。
歡迎一起私信交流。
“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题第一篇说说promise（建议收藏）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： “约见”面试官系列之常见面试题之第七十四
- 下一篇： “约见”面试官系列之常见面试题第十二篇之