一、 說說你對 Fetch 的理解,它有哪些優點和不足?
Fetch API 是現代 JavaScript 中用於進行網路請求的介面,旨在替代傳統的 XMLHttpRequest。它提供了一種更簡單、更靈活的方法來獲取資源和與伺服器進行互動。下面,我將詳細介紹 Fetch 的優點和不足。
Fetch 的優點:
語法簡潔直觀:Fetch 使用基於 Promise 的機制,這使得程式碼更加簡潔易讀。相比於 XMLHttpRequest,它避免了回撥地獄(callback hell),大大提高了程式碼的可維護性。
fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));
更好的可讀性和可維護性:由於 Fetch 是基於 Promise 的,結合 async/await 語法可以使非同步程式碼看起來像同步程式碼一樣,進一步提高程式碼的可讀性。
async function fetchData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log(data); } catch (error) { console.error('Error:', error); } }
更強的靈活性:Fetch 提供了一組豐富的選項(options),可以輕鬆設定請求方法、頭資訊、請求體等。
fetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' }) });
Stream 處理:Fetch API 支援對響應體的流式處理,可以逐步讀取響應資料,適用於處理大檔案或實時資料。
fetch('https://api.example.com/data') .then(response => { const reader = response.body.getReader(); // 逐步處理資料 });
Fetch 的不足:
-
不支援進度監控:與 XMLHttpRequest 不同,Fetch 目前不支援原生的進度事件(如
onprogress
),這使得在下載或上傳大檔案時無法獲得進度更新。 -
對老舊瀏覽器的相容性:Fetch 是現代 API,某些老舊瀏覽器(如 IE)不支援,需要使用 polyfill 來保證相容性。
-
預設不傳送 Cookies:Fetch 預設不會傳送 cookies,需要手動設定
credentials
選項。
fetch('https://api.example.com/data', { credentials: 'include' });
錯誤處理機制:Fetch 對於網路錯誤和 HTTP 錯誤(如 404 或 500)的處理需要特別注意,因為只有網路錯誤會觸發 catch
,而 HTTP 錯誤仍會被視為成功的請求。
fetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .catch(error => console.error('Error:', error));
二、理解 JavaScript 中的 let、const 和 var
在 JavaScript 中,宣告變數的方式主要有三種:var
、let
和 const
。每種方式都有其獨特的特性和適用場景。下面,我將詳細介紹它們之間的區別。
1. var
var
是最早在 JavaScript 中引入的變數宣告方式。它有以下幾個特點:
- 函式作用域:
var
宣告的變數在函式內是區域性變數,在函式外是全域性變數。 - 變數提升:
var
宣告的變數會被提升到函式或全域性作用域的頂部,但變數初始化不會提升。 - 可重複宣告:同一作用域內,
var
宣告的變數可以重複宣告。
function example() { console.log(a); // undefined var a = 10; console.log(a); // 10 } example();
2. let
let
是在 ES6 中引入的,用於宣告塊級作用域的變數。它有以下幾個特點:
- 塊級作用域:
let
宣告的變數在塊級作用域內有效,不會汙染全域性作用域。 - 無變數提升:
let
宣告的變數不會被提升,必須先宣告後使用。 - 不可重複宣告:同一作用域內,
let
宣告的變數不能重複宣告。
function example() { if (true) { let a = 10; console.log(a); // 10 } console.log(a); // ReferenceError: a is not defined } example();
3. const
const
也是在 ES6 中引入的,用於宣告常量。它有以下幾個特點:
- 塊級作用域:
const
宣告的變數在塊級作用域內有效。 - 不可變性:
const
宣告的變數必須在宣告時初始化,且初始化後不可重新賦值(但對於物件和陣列,其內部值是可變的)。 - 不可重複宣告:同一作用域內,
const
宣告的變數不能重複宣告。
function example() { const a = 10; a = 20; // TypeError: Assignment to constant variable. const obj = { key: 'value' }; obj.key = 'new value'; // 這是允許的 console.log(obj.key); // 'new value' } example();