首頁 > web前端 > 前端問答 > react請求資料用什麼鉤子

react請求資料用什麼鉤子

青灯夜游
發布: 2022-03-22 14:52:39
原創
1940 人瀏覽過

react要求資料用「componentDidMount」鉤子。 React的數據請求是在鉤子函數componentDidMount()中進行的,該函數可以用來載入外部數據,或處理其他的副作用程式碼。

react請求資料用什麼鉤子

本教學操作環境:Windows7系統、react17.0.1版、Dell G3電腦。

React的資料請求是在鉤子函數:componentDidMount 中進行的

componentDidMount方法中的程式碼,是在元件已經完全掛載到網頁上才會呼叫被執行,所以可以保證資料的載入。此外,在這方法中呼叫setState方法,會觸發重渲染。所以,官方設計這個方法就是用來載入外部資料用的,或是處理其他的副作用程式碼。

針對React中使用起來較為方便的幾種資料請求方式進行了匯總,主要有以下三種,都是透過json-server模擬資料請求的介面。

1 axios

這種方法使用較為普遍,在vue中也是經常使用

#使用前先下載一哈:npm i axios

 axios.get(' http://localhost:3000/datalist').then(res=>{
  console.log(res);
})
登入後複製

結果:
react請求資料用什麼鉤子

2 fetch方式

react請求資料用什麼鉤子

react請求資料用什麼鉤子

##fetch是一種HTTP資料請求的方式,是XMLHttpRequest的一種替代方案。 fetch不是ajax的進一步封裝,而是原生js。 Fetch函數就是原生js,沒有使用XMLHttpRequest物件。 【引自fetch】

fetch('http://localhost:3000/datalist').then(res=>res.json()).then(res=>{
     console.log(res)
})
登入後複製
結果:

################3 傳統的ajax請求########## ##這個大家應該都不陌生就不細說了,當然在react也是可以用它的###
let xhr = new XMLHttpRequest();
xhr.addEventListener('load',handler);
xhr.open("GET",'http://localhost:3000/datalist');
xhr.send();
function handler(e){
    console.log(JSON.parse(e.currentTarget.response));
}
登入後複製
###結果:###############【相關推薦: ###Redis影片教學###】###

以上是react請求資料用什麼鉤子的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板