javascript fetch 用法講解
fetch 的詳細(xì)講解
fetch 是一個(gè)現(xiàn)代化的 JavaScript API，用于發(fā)送網(wǎng)絡(luò)請(qǐng)求并獲取資源。它是瀏覽器提供的全局方法，可以替代傳統(tǒng)的 XMLHttpRequest。fetch 支持 Promise，因此更易用且代碼更清晰。
1. 基本語(yǔ)法
1.1 語(yǔ)法
fetch(url, options)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));參數(shù)：
url：請(qǐng)求的資源地址。options：可選參數(shù)，用于配置請(qǐng)求（如方法、頭部信息、請(qǐng)求體等）。
返回值：
- 一個(gè)
Promise，解析為Response對(duì)象。
1.2 示例：簡(jiǎn)單 GET 請(qǐng)求
fetch('https://api.example.com/data')
.then(response => response.json()) // 將響應(yīng)解析為 JSON
.then(data => console.log(data)) // 輸出解析后的數(shù)據(jù)
.catch(error => console.error('Error:', error)); // 捕獲請(qǐng)求錯(cuò)誤2. Response 對(duì)象
Response 對(duì)象表示 fetch 請(qǐng)求的結(jié)果，包含以下常用屬性和方法：
status：HTTP 狀態(tài)碼。
fetch('https://api.example.com')
.then(response => {
console.log(response.status); // 200, 404 等
});ok：布爾值，表示請(qǐng)求是否成功（狀態(tài)碼在 200-299 之間）。
fetch('https://api.example.com')
.then(response => {
if (response.ok) {
console.log('Request was successful');
} else {
console.error('Request failed');
}
});json()：將響應(yīng)解析為 JSON。
fetch('https://api.example.com')
.then(response => response.json())
.then(data => console.log(data));text()：將響應(yīng)解析為純文本。
fetch('https://api.example.com')
.then(response => response.text())
.then(data => console.log(data));headers：響應(yīng)頭部信息。
fetch('https://api.example.com')
.then(response => {
console.log(response.headers.get('Content-Type'));
});3. 配置請(qǐng)求
fetch 的第二個(gè)參數(shù) options 用于配置請(qǐng)求方法、頭部信息、請(qǐng)求體等。
3.1 常用配置
| 選項(xiàng) | 描述 | 示例值 |
|---|---|---|
method | HTTP 請(qǐng)求方法，默認(rèn)是 GET | GET, POST, PUT |
headers | 請(qǐng)求頭部信息，用于傳遞內(nèi)容類型或認(rèn)證信息 | { 'Content-Type': 'application/json' } |
body | 請(qǐng)求體，用于發(fā)送數(shù)據(jù)（POST 和 PUT 請(qǐng)求中使用） | JSON.stringify({...}) |
mode | 請(qǐng)求模式，默認(rèn)是 cors | cors, no-cors, same-origin |
credentials | 是否攜帶憑據(jù)，如 cookies | same-origin, include |
cache | 緩存模式 | default, no-store, reload |
3.2 示例：POST 請(qǐng)求
發(fā)送一個(gè)包含 JSON 數(shù)據(jù)的 POST 請(qǐng)求：
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: 'John Doe',
age: 30,
}),
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));3.3 示例：自定義請(qǐng)求頭
向 API 添加身份驗(yàn)證令牌：
fetch('https://api.example.com/data', {
headers: {
'Authorization': 'Bearer YOUR_TOKEN',
},
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));4. 錯(cuò)誤處理
fetch 的 Promise 只有在網(wǎng)絡(luò)錯(cuò)誤時(shí)才會(huì)拒絕，比如斷網(wǎng)或無(wú)法解析域名。HTTP 錯(cuò)誤狀態(tài)碼（如 404 或 500）不會(huì)自動(dòng)觸發(fā) catch。
4.1 檢查響應(yīng)狀態(tài)
需要手動(dòng)檢查 response.ok 或 response.status：
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));5. 超時(shí)和取消請(qǐng)求
fetch 本身不支持超時(shí)或取消請(qǐng)求，可以通過 AbortController 實(shí)現(xiàn)。
5.1 設(shè)置請(qǐng)求超時(shí)
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 秒后中止請(qǐng)求
fetch('https://api.example.com/data', { signal: controller.signal })
.then(response => response.json())
.then(data => console.log(data))
.catch(error => {
if (error.name === 'AbortError') {
console.error('Fetch aborted!');
} else {
console.error('Error:', error);
}
});
// 清除超時(shí)
clearTimeout(timeoutId);6. CORS（跨域請(qǐng)求）
如果請(qǐng)求跨域資源，服務(wù)端需要設(shè)置 Access-Control-Allow-Origin 頭部。如果沒有配置，瀏覽器會(huì)拒絕跨域請(qǐng)求。
示例：配置 CORS
服務(wù)端需要添加類似以下的頭部信息：
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
7. 與 Axios 的對(duì)比
fetch 和 Axios 都是常用的網(wǎng)絡(luò)請(qǐng)求工具，但有一些差異：
| 特性 | fetch | Axios |
|---|---|---|
| API 原生支持 | 內(nèi)置于瀏覽器，無(wú)需安裝額外庫(kù) | 需要安裝第三方庫(kù) |
| Promise 支持 | 原生支持 | 原生支持 |
| 默認(rèn)錯(cuò)誤處理 | 只處理網(wǎng)絡(luò)錯(cuò)誤，不自動(dòng)處理 HTTP 錯(cuò)誤狀態(tài) | 自動(dòng)拋出 HTTP 錯(cuò)誤 |
| 自動(dòng)序列化 JSON | 需要手動(dòng)解析響應(yīng)為 JSON | 自動(dòng)解析 JSON 響應(yīng) |
| 支持取消請(qǐng)求 | 使用 AbortController 實(shí)現(xiàn) | 內(nèi)置取消功能 |
| 靈活性 | 標(biāo)準(zhǔn)化 API，更適合簡(jiǎn)單場(chǎng)景 | 功能豐富，適合復(fù)雜場(chǎng)景 |
8. 高級(jí)用法
8.1 流式響應(yīng)（ReadableStream）
fetch 可以處理流式響應(yīng)（比如逐步加載大文件）：
fetch('https://api.example.com/stream')
.then(response => response.body)
.then(stream => {
const reader = stream.getReader();
const decoder = new TextDecoder('utf-8');
reader.read().then(function processText({ done, value }) {
if (done) {
console.log('Stream finished');
return;
}
console.log(decoder.decode(value));
return reader.read().then(processText);
});
});9. 常見問題
9.1 CORS 錯(cuò)誤
- 瀏覽器跨域請(qǐng)求時(shí)，服務(wù)端未正確配置
CORS。 - 解決方案：
- 服務(wù)端設(shè)置
Access-Control-Allow-Origin。 - 使用代理服務(wù)器避免跨域。
- 服務(wù)端設(shè)置
9.2 網(wǎng)絡(luò)超時(shí)
fetch默認(rèn)沒有超時(shí)，可以使用AbortController設(shè)置超時(shí)。
9.3 JSON 解析錯(cuò)誤
如果 API 返回非 JSON 數(shù)據(jù)，調(diào)用 response.json() 會(huì)報(bào)錯(cuò)：
fetch('https://api.example.com/data')
.then(response => response.json())
.catch(error => console.error('Invalid JSON:', error));10. 總結(jié)
fetch 是一個(gè)強(qiáng)大且現(xiàn)代化的網(wǎng)絡(luò)請(qǐng)求工具，適合大部分 Web 開發(fā)場(chǎng)景：
- 優(yōu)點(diǎn)：原生支持、Promise API、更清晰的語(yǔ)法。
- 缺點(diǎn)：錯(cuò)誤處理需要手動(dòng)檢查、默認(rèn)不支持超時(shí)和取消。
對(duì)于簡(jiǎn)單場(chǎng)景，fetch 是首選；對(duì)于更復(fù)雜的場(chǎng)景（如請(qǐng)求超時(shí)、豐富的配置需求），可以考慮使用 Axios 等第三方庫(kù)。
到此這篇關(guān)于javascript fetch 講解的文章就介紹到這了,更多相關(guān)javascript fetch內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- chatGPT前端流式輸出js實(shí)現(xiàn)三種方法—fetch、SSE、websocket
- 以fetch為例詳解如何消除js異步的傳染性
- JavaScript中fetch方法的使用示例全面詳解
- Node.js?中使用fetch?按JSON格式發(fā)post請(qǐng)求的問題解析
- JavaScript Fetch API請(qǐng)求和響應(yīng)攔截詳解
- JS中fetch()用法實(shí)例詳解
- JavaScript使用Fetch的方法詳解
- js fetch異步請(qǐng)求使用實(shí)例詳解
- javascript實(shí)現(xiàn)fetch請(qǐng)求返回的統(tǒng)一攔截
相關(guān)文章
Springboot?No?bean?named?'XXXXX'?available?問
這篇文章主要介紹了Springboot?No?bean?named?'XXXXX'?available?問題解決方法,解決方法也很簡(jiǎn)單，盡量規(guī)范類的命名，注解中指定bean名稱，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
java.exe和javaw.exe的區(qū)別及使用方法
這篇文章主要介紹了java.exe和javaw.exe的區(qū)別及使用方法,需要的朋友可以參考下2014-04-04
Java如何使用poi導(dǎo)入導(dǎo)出excel工具類
這篇文章主要介紹了Java如何使用poi導(dǎo)入導(dǎo)出excel工具類問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了spring boot基于Java的容器配置講解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
SpringBean和Controller實(shí)現(xiàn)動(dòng)態(tài)注冊(cè)與注銷過程詳細(xì)講解
這篇文章主要介紹了SpringBean和Controller實(shí)現(xiàn)動(dòng)態(tài)注冊(cè)與注銷過程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-02-02
Springboot整合Druid實(shí)現(xiàn)對(duì)訪問的監(jiān)控方式
這篇文章主要介紹了Springboot整合Druid實(shí)現(xiàn)對(duì)訪問的監(jiān)控方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
Java 基于tcp協(xié)議實(shí)現(xiàn)文件上傳
這篇文章主要介紹了Java 基于tcp協(xié)議實(shí)現(xiàn)文件上傳，幫助大家更好的理解和使用Java，感興趣的朋友可以了解下2020-11-11
nacos中的配置使用@Value注解獲取不到值的原因及解決方案
這篇文章主要介紹了nacos中的配置使用@Value注解獲取不到值的原因分析，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03
kafka 重新分配partition和調(diào)整replica的數(shù)量實(shí)現(xiàn)
當(dāng)需要提升Kafka集群的性能和負(fù)載均衡時(shí),可通過kafka-reassign-partitions.sh命令手動(dòng)重新分配Partition,增加節(jié)點(diǎn)后,可以將Topic的Partition的Leader節(jié)點(diǎn)均勻分布,以提高寫入和消費(fèi)速度,感興趣的可以了解一下2022-03-03
如何使用 Shell 腳本查看多個(gè)服務(wù)器的端口是否打開的方法
這篇文章主要介紹了如何使用 Shell 腳本來(lái)查看多個(gè)服務(wù)器的端口是否打開的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06