axios入门——常用五种请求方法介绍（get、post、put、patch、delete）

写在前面

axios中文说明

为方便起见，axios为所有支持的请求方法提供了别名
params 是将与请求一起发送的 URL 参数，对应后台中的query
data 是作为请求主体被发送的数据，对应后台中的body

axios.request(config)
axios.get(url[, config])  // 只支持 params 传参
axios.delete(url[, config])  // 只支持 params传参
axios.head(url[, config]) // 只支持 params传参
axios.post(url[, data[, config]]) // 同时支持  data 和 params
axios.put(url[, data[, config]]) // 同时支持  data 和 params
axios.patch(url[, data[, config]]) // 同时支持  data 和 params

注意
在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

一、axios安装

正常情况下使用脚手架vue-cli创建的项目都集成了axios插件，无需安装，如果需要安装请使用npm install axios --save 命令进行安装

二、axios常见5种请求方法

1. get请求

用于获取数据。

2. post请求

用于提交数据（新建）、包括表单提交及文件上传。

3. put请求

用于更新数据（修改），将所有数据都推送到后端。

4. patch请求

用于更新数据（修改），只将修改的数据推送到后端。

5. delete请求

用于删除数据。

三、代码示例

首先导入axios，导入代码：

import axios from 'axios'

1. get方法

<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            axios.get('接口地址', {
                params: {
                    id: 12,//请求参数
                },
            }).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'get',//请求方法
                params: {
                    id: 12,//请求参数
                },
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>

2. post请求

post方式请求，参数有两种形式：

• form-data表单提交（图片上传，文件上传）
• applicition/json
  1）applicition/json请求方式代码如下：

<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data={
                id:12
            }
            axios.post('接口地址', data}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'post',//请求方法
                data: data,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>

2）formData请求方式代码如下：

<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data = {
                id:12
            }
            let formData = new formData()
            for(let key in data){
                fromData.append(key,data[key])
            }
            axios.post('接口地址', fromData}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'post',//请求方法
                data: fromData,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>

3. put请求

<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data = {
                id:12
            }
            axios.put('接口地址', data}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'put',//请求方法
                data: data,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>

4. patch请求

<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data = {
                id:12
            }
            axios.patch('接口地址', data}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'patch',//请求方法
                data: data,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>

5. delete请求

<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data = {
                id:12
            }
            //url传递参数
            axios.delete('接口地址', {
                parmas:{
                    id:12
                }
            }).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //post方式传递参数
            axios.delete('接口地址', {
                data:{
                    id:12
                }
            }).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'patch',//请求方法
                parmas:{
                    id:12
                },
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>

put和patch的区别 https://blog.csdn.net/lhjuejiang/article/details/82112998