react中的axios模塊你了解嗎
更新時間：2022年03月11日 11:13:29 作者：Han_Zhou_Z
這篇文章主要為大家詳細介紹了react中的axios模塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
一、react中axios模塊的使用
1、基于Promise的HTTP庫用在瀏覽器和node.js中
可以提供以下服務：
（1）從瀏覽器中創(chuàng)建XMLHttpRequest
（2）從node.js創(chuàng)建http請求
（3）支持PromiseAPI
（4）攔截請求和響應
（5）轉換請求數據和響應數據
（6）取消請求
（7）自動轉換JSON數據
（8）客戶端支持防御XSRF
2、創(chuàng)建XMLHttpRequest對象：
該對象是ajax(異步請求)的核心
3、在react中安裝axios
npm install axios
4、發(fā)起不帶參數的get請求
方式一：axios({ methods: 'get', url: '/ulr' }).then(res => {//請求成功后的處理
console.log(res)
}).catch(err => {//請求失敗后的處理
console.error(err);
})'res'是服務器返回的響應數據
err是請求失敗后的信息
方式二：axios.get('/url').then(res => {
console.log(res)
}).catch(err => {
console.error(err);
})5、帶參數的get請求
在服務器端獲取請求參數的方式--> req(request).query.參數名
方式一： axios.get('/url', {params: {id: 12}}).then(res => {
console.log(res)
}).catch(err => {
console.error(err);
})
//請求的地址實際為：http://localhost:8080/url?id=12方式二：axios({
methods: 'get',
url: 'url',
params: {
id:12 //'id'為參數名
}
}).then(res => {
console.log(res)
}).catch(err => {
console.error(err);
})6、post請求：發(fā)送表單數據和文件上傳
（1）不帶參數的post請求
方法一:axios({
method:'post',
url:'/url'
}).then(res=>{})
.catch(err=>{})方法二:axios.post('url')
.then(res=>{})
.catch(err=>{})（2）帶參數的post請求：在服務器端獲取請求參數的方式-->req.body.參數名
服務器端使用req.body.參數名 獲取數據
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請求
和post請求類似
8、delete請求
（1）可以像get請求一樣包裝請求參數:在服務器端獲取請求參數的方式--req.query.參數名
參數在url的params中：服務器端使用req.query.參數名 獲取數據
axios.delete('/url', {
params: {id: 12} //'id'為參數名
}).then(res => {
console.log(res)
}).catch(err => {
console.error(err);
})（2）可以像post請求一樣包裝請求參數：在服務器端獲取請求參數的方式--req.body.參數名
參數在請求體(post)中 將params改為 data就行：服務器端使用req.body.參數名 獲取數據
axios.delete('/url', {
data: {id: 12} //'id'為參數名
}).then(res => {
console.log(res)
}).catch(err => {
console.error(err);
})強調：axios的響應結構
后臺： res.json(result) //發(fā)送了json格式的數據
相當于：{ data: result }
前端： res.data
例如：
后臺：
res.json({
code：1001,
msg: '小森'
})前端：
res.data.code
res.data.msg
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!
相關文章
在React應用中,組件間的通信是常見的需求,通常,父組件通過props向子組件傳遞數據,但有時也需要子組件向父組件傳遞數據,本文將探討如何在React中實現(xiàn)子組件向父組件傳值的幾種方法,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了react MPA 多頁配置詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要為大家詳細介紹了react-dnd實現(xiàn)任意拖動與互換位置，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要為大家介紹了react結合typescript?封裝組件實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
基于React.js實現(xiàn)原生js拖拽效果引發(fā)的思考
這篇文章主要為大家詳細介紹了基于React.js實現(xiàn)原生js拖拽效果，繼而引發(fā)的一系列思考，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
MobX是一個強大而簡單的狀態(tài)管理工具,它可以幫助我們更好地組織和管理React應用程序中的數據流,本文給大家介紹react如何使用mobx6動態(tài)加載數據,感興趣的朋友跟隨小編一起看看吧2024-02-02
React模仿網易云音樂實現(xiàn)一個音樂項目詳解流程
這篇文章主要介紹了React模仿網易云音樂實現(xiàn)一個音樂項目的詳細流程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
在啟動React應用時,遇到Webpack版本不匹配導致的運行錯誤,解決方法包括刪除全局及局部的webpack和webpack-cli,然后根據項目需求安裝特定版本的webpack,本文通過代碼示例給大家介紹的非常詳細,需要的朋友可以參考下2024-09-09
react中history(push,go,replace)切換路由方法的區(qū)別及說明
這篇文章主要介紹了react中history(push,go,replace)切換路由方法的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
記錄React使用connect后,ref.current為null問題及解決
記錄React使用connect后,ref.current為null問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05