絡(luò)層深度剖析：50行手寫fetch封裝Req類的完整實現(xiàn)原理)
react-native-hiapp網(wǎng)絡(luò)層深度剖析50行手寫fetch封裝Req類的完整實現(xiàn)原理【免費下載鏈接】react-native-hiappHiApp written in react-native.項目地址: https://gitcode.com/gh_mirrors/re/react-native-hiappreact-native-hiapp 是一款用 React Native 編寫的仿秒拍社交應(yīng)用HiApp。它沒有引入任何第三方網(wǎng)絡(luò)請求庫整個 App 的請求能力都來自一個約 50 行的手寫 fetch 封裝——Req 類。本文帶你拆解這份 React Native 網(wǎng)絡(luò)層源碼的完整實現(xiàn)原理新手讀完可以直接照搬到自己的項目里。一、50 行代碼如何撐起整個 App 的信息流先給結(jié)論HiApp 里的時間線加載、下拉刷新、分頁更多、通訊錄、用戶登錄、動態(tài)評論全部請求都走同一個類源碼只有 App/Network/index.js 這一個文件全文不到 60 行。它由 4 個部分組成各司其職組件位置職責_buildQuery()App/Network/index.js對象 → URL 編碼后的 query 串_httpDone()/_httpFail()App/Network/index.jsHTTP 狀態(tài) 業(yè)務(wù)錯誤碼雙重判定fetch()App/Network/index.js組裝請求參數(shù)調(diào)用原生 fetchget()/post()App/Network/index.js兩個快捷方法減少重復(fù)代碼 對比思路很多人第一反應(yīng)是安裝 axios。而這個項目證明——只靠 React Native 運行時內(nèi)置的fetchAPI加上不到 50 行封裝就夠一個完整社交 App 使用了。這正是這份源碼最值得學(xué)習(xí)的地方。二、_buildQuery手寫 URL 編碼3 行搞定 query 參數(shù)如果調(diào)用時傳了query對象封裝會先把它序列化成abcd這樣的字符串再拼到 URL 后面對key 和 value 都執(zhí)行encodeURIComponent中文、空格、特殊字符都不會破壞 URL用連接各鍵值對結(jié)果以?開頭拼接到完整 URL 上效果相當于標準庫的URLSearchParams但零依賴、跨 iOS / Android 行為完全一致。三、核心fetch方法一次請求的完整生命周期App/Network/index.js 中的fetch()是整個封裝的心臟一次請求按順序經(jīng)歷 6 步拼基礎(chǔ)地址url this.baseUrl urlbaseUrl 在構(gòu)造函數(shù)里從全局配置讀取調(diào)用方只需傳相對路徑如/timeline.json拼 query如果傳了query對象追加?xxxyyy組裝參數(shù)method默認GET并固定credentials: same-origin序列化請求體有data時執(zhí)行JSON.stringify放進body透傳自定義頭傳了headers就原樣帶過去調(diào)用原生 fetch 并分流resp.okHTTP 2xx→ 解析 JSON 后進入_httpDone做業(yè)務(wù)校驗非 ok → 直接進入_httpFail返回Promise.reject網(wǎng)絡(luò)層異常斷網(wǎng)等→ 最外層.catch統(tǒng)一 reject也就是說無論哪一層失敗調(diào)用方只需要一個.catch就能兜住所有錯誤。?四、雙重錯誤判定HTTP 成功 ≠ 業(yè)務(wù)成功這是新手寫 React Native 網(wǎng)絡(luò)請求最容易踩坑的地方Req 類的做法很值得抄傳輸層錯誤靠resp.ok判斷狀態(tài)碼不是 2xx 直接失敗業(yè)務(wù)層錯誤即使 HTTP 返回 200還會檢查 JSON 響應(yīng)體里的err_code字段——有值就Promise.reject沒有才放行if (!res.err_code) { return res } else { return Promise.reject(res) }這樣接口 200 但數(shù)據(jù)有誤的場景登錄過期、參數(shù)錯誤等就和真正的網(wǎng)絡(luò)錯誤一樣被業(yè)務(wù)代碼統(tǒng)一捕獲處理不用在每個頁面里重復(fù)判斷錯誤碼。五、單例導(dǎo)出 Network別名一次導(dǎo)入全局復(fù)用文件最后一行是export default new Req()——導(dǎo)出的不是類而是唯一實例。全項目共享一個 baseUrl、一套行為天然單例也杜絕了各處 new 出來的配置不一致問題。配套的模塊別名定義在 babel.config.jsNetwork: ./App/Network因此任何頁面一行import req from Network就能開用。而 baseUrl 本身收口在 App/Config/index.js 中devBaseUrl與prodBaseUrl都指向同一份公開托管的 JSON Mock 數(shù)據(jù)源——這意味著本地運行 HiApp 完全不需要啟動后端請求出去立刻有返回非常適合作為學(xué)習(xí) React Native 網(wǎng)絡(luò)請求的入門項目。六、真實調(diào)用長什么樣看 Redux Action 里的用法項目里req.get的調(diào)用非?？酥频湫褪纠?App/Store/Actions/home.jsreturn req.get(/timeline.json).then(res { const data res.data dispatch(initTimeline(data)) })同一套 API 在項目中共有 5 處消費覆蓋三類典型場景首屏加載App/Store/Actions/app.js 中req.get(/user_login.json)拉取用戶信息分頁與刷新App/Store/Actions/home.js 用/timeline.json、/refresh_timeline.json、/more_timeline.json分別對應(yīng)加載、下拉刷新、上拉加載更多組件直連App/Views/Post/index.js 中req.get(/comments.json)加載動態(tài)評論App/Views/Settings/index.js 也導(dǎo)入了同一個req實例調(diào)用方始終只關(guān)心三件事傳什么參數(shù)、拿到什么數(shù)據(jù)、失敗怎么辦——這正是封裝成功的標志。七、新手可以直接照抄的 4 個設(shè)計點配置與實現(xiàn)分離baseUrl 放在 App/Config/index.js切換環(huán)境只改一處單例導(dǎo)出export default new Req()別名導(dǎo)入全局行為一致業(yè)務(wù)錯誤并入 Promise 鏈err_code校驗失敗即 reject.catch一網(wǎng)打盡get / post 快捷方法默認參數(shù) 覆蓋 method調(diào)用方一行搞定小結(jié)react-native-hiapp 的 Req 類用約 50 行代碼回答了React Native 網(wǎng)絡(luò)請求最小可用方案這個問題——query 編碼、請求組裝、雙重錯誤判定、單例復(fù)用一個都沒少一個多余的依賴都沒加。把它讀懂你就掌握了手寫 fetch 封裝的完整骨架。【免費下載鏈接】react-native-hiappHiApp written in react-native.項目地址: https://gitcode.com/gh_mirrors/re/react-native-hiapp創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 react-native-hiapp網(wǎng)絡(luò)層深度剖析：50行手寫fetch封裝Req類的完整實現(xiàn)原理
react-native-hiapp網(wǎng)絡(luò)層深度剖析50行手寫fetch封裝Req類的完整實現(xiàn)原理【免費下載鏈接】react-native-hiappHiApp written in react-native.項目地址: https://gitcode.com/gh_mirrors/re/react-native-hiappreact-native-hiapp 是一款用 React Native 編寫的仿秒拍社交應(yīng)用HiApp。它沒有引入任何第三方網(wǎng)絡(luò)請求庫整個 App 的請求能力都來自一個約 50 行的手寫 fetch 封裝——Req 類。本文帶你拆解這份 React Native 網(wǎng)絡(luò)層源碼的完整實現(xiàn)原理新手讀完可以直接照搬到自己的項目里。一、50 行代碼如何撐起整個 App 的信息流先給結(jié)論HiApp 里的時間線加載、下拉刷新、分頁更多、通訊錄、用戶登錄、動態(tài)評論全部請求都走同一個類源碼只有 App/Network/index.js 這一個文件全文不到 60 行。它由 4 個部分組成各司其職組件位置職責_buildQuery()App/Network/index.js對象 → URL 編碼后的 query 串_httpDone()/_httpFail()App/Network/index.jsHTTP 狀態(tài) 業(yè)務(wù)錯誤碼雙重判定fetch()App/Network/index.js組裝請求參數(shù)調(diào)用原生 fetchget()/post()App/Network/index.js兩個快捷方法減少重復(fù)代碼 對比思路很多人第一反應(yīng)是安裝 axios。而這個項目證明——只靠 React Native 運行時內(nèi)置的fetchAPI加上不到 50 行封裝就夠一個完整社交 App 使用了。這正是這份源碼最值得學(xué)習(xí)的地方。二、_buildQuery手寫 URL 編碼3 行搞定 query 參數(shù)如果調(diào)用時傳了query對象封裝會先把它序列化成abcd這樣的字符串再拼到 URL 后面對key 和 value 都執(zhí)行encodeURIComponent中文、空格、特殊字符都不會破壞 URL用連接各鍵值對結(jié)果以?開頭拼接到完整 URL 上效果相當于標準庫的URLSearchParams但零依賴、跨 iOS / Android 行為完全一致。三、核心fetch方法一次請求的完整生命周期App/Network/index.js 中的fetch()是整個封裝的心臟一次請求按順序經(jīng)歷 6 步拼基礎(chǔ)地址url this.baseUrl urlbaseUrl 在構(gòu)造函數(shù)里從全局配置讀取調(diào)用方只需傳相對路徑如/timeline.json拼 query如果傳了query對象追加?xxxyyy組裝參數(shù)method默認GET并固定credentials: same-origin序列化請求體有data時執(zhí)行JSON.stringify放進body透傳自定義頭傳了headers就原樣帶過去調(diào)用原生 fetch 并分流resp.okHTTP 2xx→ 解析 JSON 后進入_httpDone做業(yè)務(wù)校驗非 ok → 直接進入_httpFail返回Promise.reject網(wǎng)絡(luò)層異常斷網(wǎng)等→ 最外層.catch統(tǒng)一 reject也就是說無論哪一層失敗調(diào)用方只需要一個.catch就能兜住所有錯誤。?四、雙重錯誤判定HTTP 成功 ≠ 業(yè)務(wù)成功這是新手寫 React Native 網(wǎng)絡(luò)請求最容易踩坑的地方Req 類的做法很值得抄傳輸層錯誤靠resp.ok判斷狀態(tài)碼不是 2xx 直接失敗業(yè)務(wù)層錯誤即使 HTTP 返回 200還會檢查 JSON 響應(yīng)體里的err_code字段——有值就Promise.reject沒有才放行if (!res.err_code) { return res } else { return Promise.reject(res) }這樣接口 200 但數(shù)據(jù)有誤的場景登錄過期、參數(shù)錯誤等就和真正的網(wǎng)絡(luò)錯誤一樣被業(yè)務(wù)代碼統(tǒng)一捕獲處理不用在每個頁面里重復(fù)判斷錯誤碼。五、單例導(dǎo)出 Network別名一次導(dǎo)入全局復(fù)用文件最后一行是export default new Req()——導(dǎo)出的不是類而是唯一實例。全項目共享一個 baseUrl、一套行為天然單例也杜絕了各處 new 出來的配置不一致問題。配套的模塊別名定義在 babel.config.jsNetwork: ./App/Network因此任何頁面一行import req from Network就能開用。而 baseUrl 本身收口在 App/Config/index.js 中devBaseUrl與prodBaseUrl都指向同一份公開托管的 JSON Mock 數(shù)據(jù)源——這意味著本地運行 HiApp 完全不需要啟動后端請求出去立刻有返回非常適合作為學(xué)習(xí) React Native 網(wǎng)絡(luò)請求的入門項目。六、真實調(diào)用長什么樣看 Redux Action 里的用法項目里req.get的調(diào)用非?？酥频湫褪纠?App/Store/Actions/home.jsreturn req.get(/timeline.json).then(res { const data res.data dispatch(initTimeline(data)) })同一套 API 在項目中共有 5 處消費覆蓋三類典型場景首屏加載App/Store/Actions/app.js 中req.get(/user_login.json)拉取用戶信息分頁與刷新App/Store/Actions/home.js 用/timeline.json、/refresh_timeline.json、/more_timeline.json分別對應(yīng)加載、下拉刷新、上拉加載更多組件直連App/Views/Post/index.js 中req.get(/comments.json)加載動態(tài)評論App/Views/Settings/index.js 也導(dǎo)入了同一個req實例調(diào)用方始終只關(guān)心三件事傳什么參數(shù)、拿到什么數(shù)據(jù)、失敗怎么辦——這正是封裝成功的標志。七、新手可以直接照抄的 4 個設(shè)計點配置與實現(xiàn)分離baseUrl 放在 App/Config/index.js切換環(huán)境只改一處單例導(dǎo)出export default new Req()別名導(dǎo)入全局行為一致業(yè)務(wù)錯誤并入 Promise 鏈err_code校驗失敗即 reject.catch一網(wǎng)打盡get / post 快捷方法默認參數(shù) 覆蓋 method調(diào)用方一行搞定小結(jié)react-native-hiapp 的 Req 類用約 50 行代碼回答了React Native 網(wǎng)絡(luò)請求最小可用方案這個問題——query 編碼、請求組裝、雙重錯誤判定、單例復(fù)用一個都沒少一個多余的依賴都沒加。把它讀懂你就掌握了手寫 fetch 封裝的完整骨架。【免費下載鏈接】react-native-hiappHiApp written in react-native.項目地址: https://gitcode.com/gh_mirrors/re/react-native-hiapp創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考