react中的axios模塊你了解嗎
一、react中axios模塊的使用
1、基于Promise的HTTP庫(kù)用在瀏覽器和node.js中
可以提供以下服務(wù):
(1)從瀏覽器中創(chuàng)建XMLHttpRequest
(2)從node.js創(chuàng)建http請(qǐng)求
(3)支持PromiseAPI
(4)攔截請(qǐng)求和響應(yīng)
(5)轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
(6)取消請(qǐng)求
(7)自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
(8)客戶(hù)端支持防御XSRF
2、創(chuàng)建XMLHttpRequest對(duì)象:
該對(duì)象是ajax(異步請(qǐng)求)的核心
3、在react中安裝axios
npm install axios
4、發(fā)起不帶參數(shù)的get請(qǐng)求
方式一:axios({ methods: 'get', url: '/ulr' }).then(res => {//請(qǐng)求成功后的處理
console.log(res)
}).catch(err => {//請(qǐng)求失敗后的處理
console.error(err);
})'res'是服務(wù)器返回的響應(yīng)數(shù)據(jù)
err是請(qǐng)求失敗后的信息
方式二:axios.get('/url').then(res => {
console.log(res)
}).catch(err => {
console.error(err);
})5、帶參數(shù)的get請(qǐng)求
在服務(wù)器端獲取請(qǐng)求參數(shù)的方式--> req(request).query.參數(shù)名
方式一: axios.get('/url', {params: {id: 12}}).then(res => {
console.log(res)
}).catch(err => {
console.error(err);
})
//請(qǐng)求的地址實(shí)際為:http://localhost:8080/url?id=12方式二:axios({
methods: 'get',
url: 'url',
params: {
id:12 //'id'為參數(shù)名
}
}).then(res => {
console.log(res)
}).catch(err => {
console.error(err);
})6、post請(qǐng)求:發(fā)送表單數(shù)據(jù)和文件上傳
(1)不帶參數(shù)的post請(qǐng)求
方法一:axios({
method:'post',
url:'/url'
}).then(res=>{})
.catch(err=>{})方法二:axios.post('url')
.then(res=>{})
.catch(err=>{})(2)帶參數(shù)的post請(qǐng)求:在服務(wù)器端獲取請(qǐng)求參數(shù)的方式-->req.body.參數(shù)名
服務(wù)器端使用req.body.參數(shù)名 獲取數(shù)據(jù)
let data = {}
let config = {}
方式一: axios.post('/url',{id:12}).then(res => {
console.log(res)
}).catch(err => {
console.error(err);
})方式二: axios({
methods: 'post',
url: '/url',
data: {id:12}
}).then(res => {
console.log(res)
}).catch(err => {
console.error(err);
})7、put請(qǐng)求
和post請(qǐng)求類(lèi)似
8、delete請(qǐng)求
(1)可以像get請(qǐng)求一樣包裝請(qǐng)求參數(shù):在服務(wù)器端獲取請(qǐng)求參數(shù)的方式--req.query.參數(shù)名
參數(shù)在url的params中:服務(wù)器端使用req.query.參數(shù)名 獲取數(shù)據(jù)
axios.delete('/url', {
params: {id: 12} //'id'為參數(shù)名
}).then(res => {
console.log(res)
}).catch(err => {
console.error(err);
})(2)可以像post請(qǐng)求一樣包裝請(qǐng)求參數(shù):在服務(wù)器端獲取請(qǐng)求參數(shù)的方式--req.body.參數(shù)名
參數(shù)在請(qǐng)求體(post)中 將params改為 data就行:服務(wù)器端使用req.body.參數(shù)名 獲取數(shù)據(jù)
axios.delete('/url', {
data: {id: 12} //'id'為參數(shù)名
}).then(res => {
console.log(res)
}).catch(err => {
console.error(err);
})強(qiáng)調(diào):axios的響應(yīng)結(jié)構(gòu)
后臺(tái): res.json(result) //發(fā)送了json格式的數(shù)據(jù)
相當(dāng)于:{ data: result }
前端: res.data
例如:
后臺(tái):
res.json({
code:1001,
msg: '小森'
})前端:
res.data.code
res.data.msg
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
react實(shí)現(xiàn)頭部導(dǎo)航,選中狀態(tài)底部出現(xiàn)藍(lán)色條塊問(wèn)題
這篇文章主要介紹了react實(shí)現(xiàn)頭部導(dǎo)航,選中狀態(tài)底部出現(xiàn)藍(lán)色條塊問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Redux thunk中間件及執(zhí)行原理詳細(xì)分析
redux的核心概念其實(shí)很簡(jiǎn)單:將需要修改的state都存入到store里,發(fā)起一個(gè)action用來(lái)描述發(fā)生了什么,用reducers描述action如何改變state tree,這篇文章主要介紹了Redux thunk中間件及執(zhí)行原理分析2022-09-09
關(guān)于?React?中?useEffect?使用問(wèn)題淺談
本文主要介紹了關(guān)于React中useEffect使用問(wèn)題淺談,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
flouting?ui定位組件完美替代ant?deisgn使用詳解
這篇文章主要為大家介紹了flouting?ui定位組件完美替代ant?deisgn使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11
解析React?ref?命令代替父子組件的數(shù)據(jù)傳遞問(wèn)題
這篇文章主要介紹了React?-?ref?命令為什么代替父子組件的數(shù)據(jù)傳遞,使用?ref?之后,我們不需要再進(jìn)行頻繁的父子傳遞了,子組件也可以有自己的私有狀態(tài)并且不會(huì)影響信息的正常需求,這是為什么呢?因?yàn)槲覀兪褂昧?ref?命令的話(huà),ref是可以進(jìn)行狀態(tài)的傳輸2022-08-08

