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