axios发送请求的五种方法详解-Toy模板网

这篇具有很好参考价值的文章主要介绍了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);
})