1. 程式人生 > >21-撩課大前端-面試寶典-第二十一篇

21-撩課大前端-面試寶典-第二十一篇

1.對async、await的理解,內部原理?


①async---宣告一個非同步函式:
自動將常規函式轉換成promise,返回值也是一個promise物件,
只有async函式內部的非同步操作執行完,才會執行then方法指定的回撥函式,內部可以使用await; 
     
②await--暫停非同步的功能執行:
放在promise呼叫之前,await強制其他程式碼等待,直到promise完成並返回結果,
只能與promise一起使用,不適用於回撥,只能在async函式內部使用。
下面介紹下使用場景:
a.同時發出三個互不依賴的請求,
不建議使用

async/awaitasync function getABC() {
	let A= await getValueA();//A needs 2 second
	let B= await getValueB();//B needs 2 second
	let C= await getValueC();//C needs 2 second
	return A*B*C;
}

複製程式碼上圖所示,
上面我們A需要2s,B需要4s,C需要3s,
我們如上圖所示發請求,就存在彼此依賴的關係,c等b執行完,b等a執行完,
從開始到結束需要(2+3+4)9s。
此時我們需要用Promise.all()將非同步呼叫並行執行,
而不是一個接一個執行,

如下所示:

async function getABC() {
	let results = await Promise.all([getValueA,getValueB,getValueC]);
	return results.reduce((total,value)=>total*value)
}

複製程式碼這樣將會節省我們不少的時間,從原來的的9s縮減到4s。
b.一個需要驗證碼提交表單的頁面請求,
此時使用async/await會更好常規程式碼

const call1Promise = fetch('/#1...');
call1Promise.then(response=>response.json())
            .then(json=>{
            	//驗證碼返回後的後續操作
            	const call2Promise = fetch('/#2...');
            	return call2Promise;
            })
            .then(response=>response.json())
            .then(json=>{
            	console.log(json.respCode);
            })
            .catch(err=>{
            	console.log(err);
            })

複製程式碼用Async/Await的方式將邏輯分裝在一個async函式裡,
這樣就可以直接對promise使用await了,也就規避了寫then回撥。
最後我們呼叫這個async函式,然後按照普通的方式使用返回的promise。
美哉!

async function postForm(){
	try{
		//驗證碼是否通過,拿到返回的json
		const response1 = await fetch('/#1...');
		const json1 = await response1.json();
		let json2;
		//對第一個請求的返回資料進行判斷  
        // 滿足條件則請求第二個介面並返回資料
		if(json1.respCode===200){
			const response2 = await fetch('/#2...');
			json2 = await response2.json();
		}
		return json2;
	}catch(e){
		console.log(e);
	}
}

複製程式碼簡單的模擬場景

2.介紹下Promise,內部實現?


promise從字面上理解就是承諾,即未來完成的事兒。
從語法上來看,它是一個物件,
從它這裡可以獲取下一步操作的訊息,
而promise物件的狀態不受外部影響。

相關程式碼如下:

const PENDING = 'pending'; //初始狀態
const FULFILLED = 'fulfilled'; // 成功狀態
const REJECTED = 'rejected'; // 失敗狀態
function Promise(extutor){
  let self = this;
  self.status = PENDING; // 設定狀態
  // 存放成功回撥的陣列
  self.onResolveCallbacks = [];
  // 存放失敗回撥的陣列
  self.onRejectedCallbacks = [];
  function resolve(value){
    if(self.status === PENDING){
      self.status = FULFILLED;
      self.value = value;
      self.onResolveCallbacks.forEach(cb => cd(self.value))
    }
  } 
  function reject(reason){
    if(self.status === PENDING){
      self.status = REJECTED;
      self.value = reason;
      self.onRejectCallbacks.forEach(cb => cd(self.value))
    }
  } 
  try{
    excutor(resolve, reject)
  } catch(e) {
    reject(e)
  }
}

3.Http請求中的keep-alive有了解嗎?


在http早期,每個http請求都要求開啟一個tpc socket連線,
並且使用一次之後就斷開這個tcp連線。
使用keep-alive可以改善這種狀態,
即在一次TCP連線中可以持續傳送多份資料而不會斷開連線。
通過使用keep-alive機制,可以減少tcp連線建立次數,
也意味著可以減少TIME_WAIT狀態連線,
以此提高效能和提高http伺服器的吞吐率
(更少的tcp連線意味著更少的系統核心呼叫,socket的accept()和close()呼叫)。
但是,keep-alive並不是免費的午餐,長時間的tcp連線容易導致系統資源無效佔用。
配置不當的keep-alive,有時比重複利用連線帶來的損失還更大。
所以,正確地設定keep-alive timeout時間非常重要。

4.http中的狀態碼302代表的是什麼意思?


302重定向表示臨時性轉移(Temporarily Moved ),
當一個網頁URL需要短期變化時使用。
順便提一嘴301301重定向/跳轉一般,
表示本網頁永久性轉移到另一個地址。    
301是永久性轉移(Permanently Moved),SEO常用的招式,
會把舊頁面的PR等資訊轉移到新頁面301重定向與302重定向的區別   
301重定向是永久的重定向,
搜尋引擎在抓取新內容的同時也將舊的網址替換為重定向之後的網址。   
302重定向是臨時的重定向,
搜尋引擎會抓取新的內容而保留舊的網址。
因為伺服器返回302程式碼,
搜尋引擎認為新的網址只是暫時的。

5.請描述utf-8和unicode的區別?


Unicode 是「字符集」UTF-8 是「編碼規則」Unicode是一套複雜的字元編碼標準,
簡單來說就是將人類使用的每個所謂字元與一個非負整數對應,
並且保證不同的字元對應的整數一定不同。
UTF-8是這個整數的編碼方式,用1到4位元組來表達一個整數。
關係:UTF-8是Unicode的實現方式之一,
它規定了字元如何在計算機中儲存、傳輸等。