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