React中的axios模塊及使用方法
1 axios介紹
axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。它可以提供以下服務(wù)：
1、從瀏覽器中創(chuàng)建XMLHttpRequest（該對象是ajax（異步請求）的核心）
2、從node.js創(chuàng)建http請求
3、支持PromiseAPI
4、攔截請求和響應(yīng)
5、轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
6、取消請求
7、自動轉(zhuǎn)換JSON數(shù)據(jù)
8、客戶端支持防御XSRF
2 使用方法
2.1 在React中安裝axios
npm install axios
2.2 get請求
1、發(fā)起不帶參數(shù)的get請求：
// 方式1
axios({methods: 'get', url: '/url'})
.then(res => { // 請求成功后的處理
// res是服務(wù)器返回的響應(yīng)數(shù)據(jù)
}).catch(err => { // 請求失敗后的處理
// err是請求失敗后的信息
})
// 方式2
axios.get("url")
.then(res => { // 請求成功后的處理
// res是服務(wù)器返回的響應(yīng)數(shù)據(jù)
}).catch(err => { // 請求失敗后的處理
// err是請求失敗后的信息
})2、發(fā)起帶參數(shù)的get請求：在服務(wù)器端獲取請求參數(shù)的方式 —> req.query.參數(shù)名
// 方式1
axios.get("url", {params: {參數(shù)名: 參數(shù)值}})
.then(res => {
})
.catch(err => {
})
// 方式2
axios({
method: "get",
url: "url",
params: {
參數(shù)名: 參數(shù)值
}
})
.then(res => {
})
.catch(err => {
})2.3 post請求：發(fā)送表單數(shù)據(jù)和文件上傳
1、發(fā)起不帶參數(shù)的post請求
// 方式1
axios({
method: "post",
url: "url"
}).then(res => {
}).catch(err => {
})
// 方式2
axios.post("url")
.then(res => {
}).catch(err => {
})
2、發(fā)起帶參數(shù)的post請求：在服務(wù)器端獲取請求參數(shù)的方式 —> req.body.參數(shù)名
// 方式1
axios({
method: "post",
url: "url",
data: {
參數(shù)名: 參數(shù)值
}
}).then(res => {
}).catch(err => {
})
// 方式2
axios.post("url", {參數(shù)名: 參數(shù)值})
.then(res => {
}).catch(err => {
})
2.4 put請求：對數(shù)據(jù)進(jìn)行全部更新
1、發(fā)起不帶參數(shù)的put請求
// 方式1
axios({
method: "put",
url: "url"
}).then(res => {
}).catch(err => {
})
// 方式2
axios.put("url")
.then(res => {
}).catch(err => {
})
2、發(fā)起帶參數(shù)的put請求：在服務(wù)器端獲取請求參數(shù)的方式 —> req.body.參數(shù)名
// 方式1
axios({
method: "put",
url: "url",
data: {
參數(shù)名: 參數(shù)值
}
}).then(res => {
}).catch(err => {
})
// 方式2
axios.put("url", {參數(shù)名: 參數(shù)值})
.then(res => {
}).catch(err => {
})
2.5 patch請求：只對更改過的數(shù)據(jù)進(jìn)行更新
1、發(fā)起不帶參數(shù)的patch請求
// 方式1
axios({
method: "patch",
url: "url"
}).then(res => {
}).catch(err => {
})
// 方式2
axios.patch("url")
.then(res => {
}).catch(err => {
})
2、發(fā)起帶參數(shù)的patch請求：在服務(wù)器端獲取請求參數(shù)的方式 —> req.body.參數(shù)名
// 方式1
axios({
method: "patch",
url: "url",
data: {
參數(shù)名: 參數(shù)值
}
}).then(res => {
}).catch(err => {
})
// 方式2
axios.patch("url", {參數(shù)名: 參數(shù)值})
.then(res => {
}).catch(err => {
})
2.6 delete請求：刪除請求（參數(shù)可以放在url上，也可以和post一樣放在請求體中）
1、可以像get請求一樣包裝請求參數(shù)：在服務(wù)器端獲取請求參數(shù)的方式 —> req.query.參數(shù)名
axios.delete('url', {
params: {
參數(shù)名: 參數(shù)值
}
}).then(res => {
}).catch(err => {
})
2、可以像post請求一樣包裝請求參數(shù)：在服務(wù)器端獲取請求參數(shù)的方式 —> req.body.參數(shù)名
axios.delete('url', {data: {參數(shù)名: 參數(shù)值}})
.then(res => {
})
.catch(err => {
})
3 axios的響應(yīng)結(jié)構(gòu)
{
// `data` 由服務(wù)器提供的響應(yīng)
data: {},
// `status` HTTP 狀態(tài)碼
status: 200,
// `statusText` 來自服務(wù)器響應(yīng)的 HTTP 狀態(tài)信息
statusText: "OK",
// `headers` 服務(wù)器響應(yīng)的頭
headers: {},
// `config` 是為請求提供的配置信息
config: {}
}
后臺：res.json(result)，發(fā)送了json格式的數(shù)據(jù)，相當(dāng)于：{ data: result }
前端：res.data
例如后臺：
res.json({
code: 1001,
msg: '橘貓吃不胖'
})
前端：
res.data.code // 1001 res.data.msg // 橘貓吃不胖
到此這篇關(guān)于React中的axios模塊的文章就介紹到這了,更多相關(guān)React axios模塊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React Native開發(fā)封裝Toast與加載Loading組件示例
這篇文章主要介紹了React Native開發(fā)封裝Toast與加載Loading組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了React使用公共文件夾public問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
React組件設(shè)計(jì)模式之組合組件應(yīng)用實(shí)例分析
這篇文章主要介紹了React組件設(shè)計(jì)模式之組合組件,結(jié)合實(shí)例形式分析了React組件設(shè)計(jì)模式中組合組件相關(guān)概念、原理、應(yīng)用場景與操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
React?hook實(shí)現(xiàn)簡單的websocket封裝方式
這篇文章主要介紹了React?hook實(shí)現(xiàn)簡單的websocket封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
redux功能強(qiáng)大的Middleware中間件使用學(xué)習(xí)
這篇文章主要為大家介紹了redux功能強(qiáng)大的Middleware中間件使用學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
詳解React中多種組件通信方式的實(shí)現(xiàn)
在React中,組件之間的通信是一個非常重要的話題,React提供了幾種方式來實(shí)現(xiàn)跨組件通信,下面小編將詳細(xì)講講其中幾種通信方式,并提供實(shí)際的代碼示例,需要的可以參考下2023-11-11
詳解如何使用React和MUI創(chuàng)建多選Checkbox樹組件
這篇文章主要為大家詳細(xì)介紹了如何使用 React 和 MUI（Material-UI）庫來創(chuàng)建一個多選 Checkbox 樹組件,該組件可以用于展示樹形結(jié)構(gòu)的數(shù)據(jù),并允許用戶選擇多個節(jié)點(diǎn),感興趣的可以了解下2024-01-01
基于React的狀態(tài)管理實(shí)現(xiàn)一個簡單的顏色轉(zhuǎn)換器
這篇文章主要介紹了用React的狀態(tài)管理,簡簡單單實(shí)現(xiàn)一個顏色轉(zhuǎn)換器,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-08-08
Yarn安裝項(xiàng)目依賴報(bào)error?An?unexpected?error?occurred:?“XXXXX：E
這篇文章主要為大家介紹了Yarn安裝項(xiàng)目依賴報(bào)error?An?unexpected?error?occurred:?“XXXXX：ESOCKETTIMEOUT”問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
React 提供了 refrefref 屬性，讓我們可以引用組件的實(shí)例或者原生 DOM 元素,使用 refrefref，可以在父組件中調(diào)用子組件暴露出來的方法，或者調(diào)用原生 element 的 API,這篇文章主要介紹了React中的ref屬性的使用,需要的朋友可以參考下2023-04-04