JavaScript的Fetch API是一種現代的Web API,它使得開發者可以輕松地獲取和發送網絡請求。在Web應用程序中,網絡請求是非常重要的一部分。我們通過發送網絡請求從服務器獲取數據,包括HTML頁面、JSON數據等等。Fetch API簡化了網絡請求的過程,通過它我們可以使用更簡短、更清晰的代碼來實現網絡請求。
Fetch API最簡單的使用方式是通過fetch()函數來發送GET請求,如下所示:
fetch('http://example.com/movies.json') .then(function(response) { return response.json(); }) .then(function(data) { console.log(data); });
這段代碼向http://example.com/movies.json發送GET請求,并在成功返回響應后,將json數據解析為JavaScript對象并在控制臺打印。如果請求失敗,則會拋出一個錯誤。
Fetch API支持非常多的參數選項,讓我們可以配置請求的方式、請求頭、請求體等等。下面是一個POST請求的例子:
fetch('http://example.com/movies', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({title: 'The Godfather', director: 'Francis Ford Coppola'}) }) .then(function(response) { console.log(response); });
這段代碼向http://example.com/movies發送POST請求,其中請求頭為application/json,請求體為一個JSON對象。在成功返回響應后,將響應對象輸出到控制臺。
Fetch API也支持CORS(Cross-Origin Resource Sharing),讓我們可以從其他域名獲取數據。下面的示例向另一個域名發起GET請求:
fetch('http://example.com/movies.json', {mode: 'cors'}) .then(function(response) { return response.json(); }) .then(function(data) { console.log(data); });
這段代碼向http://example.com/movies.json發送GET請求,并設置mode為'cors'來支持CORS。在成功返回響應后,將json數據解析為JavaScript對象并在控制臺打印。
Fetch API還支持請求攔截器(interceptor),我們可以在請求發送前或響應返回后對它們進行攔截和處理。下面的示例演示了如何向所有請求添加Authorization頭:
fetch.interceptors.request.use(function(config) { config.headers.Authorization = 'Bearer ' + getToken(); return config; }); fetch('http://example.com/movies.json') .then(function(response) { return response.json(); }) .then(function(data) { console.log(data); });
這段代碼使用fetch.interceptors.request.use()函數向所有請求添加Authorization頭。在成功返回響應后,將json數據解析為JavaScript對象并在控制臺打印。
Fetch API的出現大大簡化了Web應用程序中的網絡請求流程。它提供了簡短、清晰的代碼,支持非常多的參數選項和請求攔截器,讓我們可以更加靈活地配置和發送網絡請求。