axios 5种请求接口方式的区别

1、get：获取数据

不带参数的写法

//方式1：
    axios({
        url:'/路径',
        methods:'get'
    })

//方式2：
    axios.get('/路径')

带参数的写法：(参数被拼接在url地址上，或者被包裹在params属性对象内)

//方式1:
    //请求的地址实际为 localhost:8080/url?id=22
    axios.get('/路径', {params: {id: 22}})

//方式2:
    axios({
        methods: 'get',
        url: '路径',
        params: {
            id:22
        }
    }) 

//方式3：
    axios.get('/路径?id=22') 

2、post：提交数据（表单提交+文件上传）

let data = {}
let config = {}
 
//方式1:  
    axios.post('/路径',data,config)
 
//方式2: 
    axios({
       methods: 'post',
       url: '/路径',
       data: data,
       config: config
       })

其中data可以有两种格式: form-data(图片上传,文件上传)；applicition/json（目前比较流行）

上面两种方法都是appliction/json格式

如下为: form-data格式

let formData = new FormData()
let data = {id: 12}
for (let key in data) {
    formData.append(key, data[key]) //床架form-data格式数据
}
axios({
    methods: 'post',
    url: '/路径',
    data: formData
})

该请求发出之后可以在浏览器中查看此次请求的request header里面content-type: 为 form-data形式<br>

3、put：对数据进行全部更新（把所有数据更新到后端）

和post请求类似，只不过请求方法不同

4、patch：只对更改过的数据进行更新（把更新的数据更新到后端）

和post请求类似，只不过请求方法不同

5、delete：删除数据（参数可以放在url上，也可以和post一样放在请求体上）

axios.delete('/url', {params: {id: 22}})  参数在url，params很重要

axios.delete('/url', {data: {id: 22}}) 参数在请求体中，将params改为 data就行