axios的五种请求方式

一、GET

用于获取数据。

1、带参数

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

// 方式二: // 请求的地址为 localhost:8080/url?id=2
axios({
    methods: 'get',
    url: '/url',
    params: {
        id: 2
    }
})

2、不带参数

// 方式一: 
axios({ methods: 'get', url: '/url' })

// 方式二: 
axios.get('/url')

二、POST

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

// 方式一:
axios.post('/url',data,config)

// 方式二:
axios({
    methods: 'post',
    url: '/url',
    data: data,
    config: config,
    headers:{'Content-Type':'multipart/form-data;charset=UTF-8'}
})

针对不同请求类型设置header  Content-Type

1、Content-Type: application/json（序列化的json字符串）

let data = {"name":"susan","age":"24"};
axios.post('/url',data)
.then(res=>{
    console.log('res=>',res);            
})

2、Content-Type: multipart/form-data （用以支持向服务器发送二进制数据，多用于文件上传，multipart/form-data不会对参数编码，使用的boundary(分割线)，相当于&，boundary的值是----Web******）

let formData = new FormData()
let data = {
    'name': 'susan',
    'age':'24'
}
// 创建form-data格式数据
// formData.append('name', 'susan');
// formData.append('age', '24');
for (let key in data) {
    formData.append(key, data[key])
}
axios({
    methods: 'post',
    url: '/url',
    data: formData
})

3、Content-Type: application/x-www-form-urlencoded （提交的默认方式，参数都是通过浏览器的url传递，都是以key=&value=的方式写在url后面）

import axios from 'axios'
import qs from 'Qs'
let data = {"name":"susan","age":"24"};
axios.post('/url',qs.stringify({
    data
}))
.then(res=>{
    console.log('res=>',res);            
})

 

三、PUT

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

// 方式一:
axios.put('/url',data)

// 方式二:
axios({
    methods: 'put',
    url: '/url',
    data: data
})

 

四、DELETE

用于删除数据。通常只传一个id即可axios.delete(`/url/${id}`)

// 方式一:参数在url
axios.delete('/url', {params: {id: 12}})

// 方式二:参数在请求体中
axios.delete('/url', {data: {id: 12}})

 

 五、PATCH（--对比PUT）

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

在HTTP协议中，请求方法 PATCH  用于对资源进行部分修改。

在HTTP协议中， PUT 方法已经被用来表示对资源进行整体覆盖， 而 POST 方法则没有对标准的补丁格式的提供支持。不同于  PUT 方法，而与 POST 方法类似，PATCH  方法是非幂等的，这就意味着连续多个的相同请求会产生不同的效果。

要判断一台服务器是否支持  PATCH 方法，那么就看它是否将其添加到了响应首部  Allow 或者  Access-Control-Allow-Methods（在跨域访问的场合，CORS）的方法列表中 。

另外一个支持 PATCH 方法的隐含迹象是 Accept-Patch首部的出现，这个首部明确了服务器端可以接受的补丁文件的格式。

// 方式一:
axios.patch('/url',data)

// 方式二:
axios({
    methods: 'patch',
    url: '/url',
    data: data
})