React中的axios模塊及使用方法
1 axios介紹
axios 是一個(gè)基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。它可以提供以下服務(wù)：
1、從瀏覽器中創(chuàng)建XMLHttpRequest（該對(duì)象是ajax（異步請(qǐng)求）的核心）
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、客戶端支持防御XSRF
2 使用方法
2.1 在React中安裝axios
npm install axios
2.2 get請(qǐng)求
1、發(fā)起不帶參數(shù)的get請(qǐng)求：
// 方式1
axios({methods: 'get', url: '/url'})
.then(res => { // 請(qǐng)求成功后的處理
// res是服務(wù)器返回的響應(yīng)數(shù)據(jù)
}).catch(err => { // 請(qǐng)求失敗后的處理
// err是請(qǐng)求失敗后的信息
})
// 方式2
axios.get("url")
.then(res => { // 請(qǐng)求成功后的處理
// res是服務(wù)器返回的響應(yīng)數(shù)據(jù)
}).catch(err => { // 請(qǐng)求失敗后的處理
// err是請(qǐng)求失敗后的信息
})2、發(fā)起帶參數(shù)的get請(qǐng)求：在服務(wù)器端獲取請(qǐng)求參數(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請(qǐng)求：發(fā)送表單數(shù)據(jù)和文件上傳
1、發(fā)起不帶參數(shù)的post請(qǐng)求
// 方式1
axios({
method: "post",
url: "url"
}).then(res => {
}).catch(err => {
})
// 方式2
axios.post("url")
.then(res => {
}).catch(err => {
})
2、發(fā)起帶參數(shù)的post請(qǐng)求：在服務(wù)器端獲取請(qǐng)求參數(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請(qǐng)求：對(duì)數(shù)據(jù)進(jìn)行全部更新
1、發(fā)起不帶參數(shù)的put請(qǐng)求
// 方式1
axios({
method: "put",
url: "url"
}).then(res => {
}).catch(err => {
})
// 方式2
axios.put("url")
.then(res => {
}).catch(err => {
})
2、發(fā)起帶參數(shù)的put請(qǐng)求：在服務(wù)器端獲取請(qǐng)求參數(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請(qǐng)求：只對(duì)更改過的數(shù)據(jù)進(jìn)行更新
1、發(fā)起不帶參數(shù)的patch請(qǐng)求
// 方式1
axios({
method: "patch",
url: "url"
}).then(res => {
}).catch(err => {
})
// 方式2
axios.patch("url")
.then(res => {
}).catch(err => {
})
2、發(fā)起帶參數(shù)的patch請(qǐng)求：在服務(wù)器端獲取請(qǐng)求參數(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請(qǐng)求：刪除請(qǐng)求（參數(shù)可以放在url上，也可以和post一樣放在請(qǐng)求體中）
1、可以像get請(qǐng)求一樣包裝請(qǐng)求參數(shù)：在服務(wù)器端獲取請(qǐng)求參數(shù)的方式 —> req.query.參數(shù)名
axios.delete('url', {
params: {
參數(shù)名: 參數(shù)值
}
}).then(res => {
}).catch(err => {
})
2、可以像post請(qǐng)求一樣包裝請(qǐng)求參數(shù)：在服務(wù)器端獲取請(qǐng)求參數(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` 是為請(qǐng)求提供的配置信息
config: {}
}
后臺(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 // 1001 res.data.msg // 橘貓吃不胖
到此這篇關(guān)于React中的axios模塊的文章就介紹到這了,更多相關(guān)React axios模塊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
webpack4+react多頁面架構(gòu)的實(shí)現(xiàn)
webpack在單頁面打包上應(yīng)用廣泛，以create-react-app為首的腳手架眾多。這篇文章主要介紹了webpack4+react多頁面架構(gòu)的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
React Native使用百度Echarts顯示圖表的示例代碼
本篇文章主要介紹了React Native使用百度Echarts顯示圖表的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
React視頻播放控制組件Video Controls的實(shí)現(xiàn)
本文主要介紹了React視頻播放控制組件Video Controls的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02
這篇文章主要介紹了react組件基本用法,結(jié)合實(shí)例形式分析了react組件傳值、生命周期、受控組件和非受控組件等相關(guān)操作技巧,需要的朋友可以參考下2020-04-04
詳解react-router 4.0 下服務(wù)器如何配合BrowserRouter
這篇文章主要介紹了詳解react-router 4.0 下服務(wù)器如何配合BrowserRouter，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
React是前端開發(fā)每天都用的前端框架，自然要深入掌握它的原理。我用 React 也挺久了，這篇文章就來總結(jié)一下我對(duì) react 原理的理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助2022-11-11
react使用CSS實(shí)現(xiàn)react動(dòng)畫功能示例
這篇文章主要介紹了react使用CSS實(shí)現(xiàn)react動(dòng)畫功能,結(jié)合實(shí)例形式分析了react使用CSS實(shí)現(xiàn)react動(dòng)畫功能具體步驟與實(shí)現(xiàn)方法,需要的朋友可以參考下2020-05-05
react頁面中存在多個(gè)input時(shí)巧妙設(shè)置value屬性方式
這篇文章主要介紹了react頁面中存在多個(gè)input時(shí)巧妙設(shè)置value屬性方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
props?是?React?組件通信最重要的手段，它在?React?的世界中充當(dāng)?shù)慕巧鞘种匾摹W(xué)好?props?可以使組件間通信更加靈活，同時(shí)文中會(huì)介紹一些?props?的操作技巧，和學(xué)會(huì)如何編寫嵌套組件2022-10-10
這篇文章主要介紹了React-hooks中的useEffect,對(duì)于React組件來說，主作用是根據(jù)數(shù)據(jù)(state/props)渲染UI，除此之外都是副作用（比如手動(dòng)修改DOM、發(fā)送ajax請(qǐng)求），本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-05-05