日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React中的axios模塊及使用方法_React

作者：橘貓吃不胖～ ? 更新時間： 2022-05-09 編程語言

1 axios介紹

axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。它可以提供以下服務：
1、從瀏覽器中創建XMLHttpRequest（該對象是ajax（異步請求）的核心）
2、從node.js創建http請求
3、支持PromiseAPI
4、攔截請求和響應
5、轉換請求數據和響應數據
6、取消請求
7、自動轉換JSON數據
8、客戶端支持防御XSRF

2 使用方法

2.1 在React中安裝axios

npm install axios

2.2 get請求

1、發起不帶參數的get請求：

// 方式1
axios({methods: 'get', url: '/url'})
    .then(res => { // 請求成功后的處理
        // res是服務器返回的響應數據
    }).catch(err => { // 請求失敗后的處理
    // err是請求失敗后的信息
})
// 方式2
axios.get("url")
    .then(res => { // 請求成功后的處理
        // res是服務器返回的響應數據
    }).catch(err => { // 請求失敗后的處理
    // err是請求失敗后的信息
})

2、發起帶參數的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請求：發送表單數據和文件上傳

1、發起不帶參數的post請求

// 方式1
axios({
    method: "post",
    url: "url"
}).then(res => {

}).catch(err => {
    
})

// 方式2
axios.post("url")
    .then(res => {

    }).catch(err => {
    
})

2、發起帶參數的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、發起不帶參數的put請求

// 方式1
axios({
    method: "put",
    url: "url"
}).then(res => {

}).catch(err => {
    
})

// 方式2
axios.put("url")
    .then(res => {

    }).catch(err => {
    
})

2、發起帶參數的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、發起不帶參數的patch請求

// 方式1
axios({
    method: "patch",
    url: "url"
}).then(res => {

}).catch(err => {
    
})

// 方式2
axios.patch("url")
    .then(res => {

    }).catch(err => {
    
})

2、發起帶參數的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 狀態碼
    status: 200,
    // `statusText` 來自服務器響應的 HTTP 狀態信息
    statusText: "OK",
    // `headers` 服務器響應的頭
    headers: {},
    // `config` 是為請求提供的配置信息
    config: {}
}

后臺：res.json(result)，發送了json格式的數據，相當于：{ data: result }
前端：res.data

例如后臺：

res.json({
    code: 1001,
    msg: '橘貓吃不胖'
})

前端：

res.data.code // 1001
res.data.msg // 橘貓吃不胖

原文鏈接：https://blog.csdn.net/m0_46612221/article/details/123341393

欄目分類
最近更新