React中的axios模块及使用方法

目录

• 1 axios介绍
• 2 使用方法
• 2.1 在React中安装axios
• 2.2 get请求
• 2.3 post请求：发送表单数据和文件上传
• 2.4 put请求：对数据进行全部更新
• 2.5 patch请求：只对更改过的数据进行更新
• 2.6 delete请求：删除请求（参数可以放在url上，也可以和post一样放在请求体中）

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 // 橘猫吃不胖