axios常用写法汇总
axios常用写法汇总，内容包括如下，delete，get，post，patch方法等
·
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//axios别名方法
// axios.get(url[, config]) 用于获取数据
axios.get(`/url/?task=${task}&task2=${task2}`, {
//请求头配置例如： `headers` 是即将被发送的自定义请求头
headers: {
'xxx': 'xxx'
}
}).then(res => { }).catch(err => { })
//等价于以下的写法，但是要记住想拼接数据在url后，config配置对象的key一定是params，其他的都不行
axios.get(`url`, {
params: { //params是即将与请求一起发送的 URL 参数 最终会将其拼接在路径上(如果key不是params，那么其携带的参数不会被拼接在url上，并且载荷也没有相关信息)
task1: task1,
task2: task2
},
headers: { 'xxx': 'xxxx' }
}).then(res => { }).catch(err => { })
//也可以这样子写，定义一个通用的共享数据
var send_data = {
//responseType: "blob",如果需要下载文件可以能额外添加配置
params:{
key:value,
key:value,
}
// headers: { 'xxx': 'xxxx' }
}
axios.get(`url`,send_data).then(res => { }).catch(err => { })
/* axios.post(url[, data[, config]]) 用于发送数据
`data` 是作为请求主体被发送的数据
*/
axios.post(`url`,
{ key:value;key:value }, //这个对象就相当于data
{ headers: { 'xxx': 'xxx' } }
).then(res => { })
/* axios.delete(url[, config])它与axios.get(url[, config])用法基本相似,但是作用不同，它用于删除数据，同get方法一样也可以有几种写法
*/
// 写法一：，将要删除的参数拼接在url路径中
axios.delete(`url?id=${id}`,{
headers:{
'xxx':'xxx'
}
}).then(res=>{}).catch(err=>{})
//写法二：params，请求数据拼接在路径中
axios.delete(`url`,{
params:{
task1:task1,
task2:task2
},
headers:{
'xxx':'xxx'
}
}).then(res=>{}).catch(err=>{})
//写法三：
let send_data = {
params:{key:value},
headers:{},
responseType:xx
}
axios.delete(`url`,send_data).then(res=>{}).catch(err=>{})
/*axios.patch(url[, data[, config]])
用法同post类似，它是用于修改数据
*/
axios.patch(`url`,
{ task1: task1, task2: task2 }, //这个对象就相当于data
{ headers: { 'xxx': 'xxx' } }).then(res => { })
//axios api 传递相关配置请求
axios('/url/123') //如果不写方法 默认是get方法请求
axios({ //get请求
methods: 'get',
url: 'url',
Headers: '请求头配置',
params:{
key:value
}
}).then(res => {}).catch(err => { })
//非别名方法
axios({
methods: 'post', //post 请求
url: 'url',
data: {
"xxx": "xxx"
}
}).then(res => {
}).catch(err => { })
</script>
</body>
</html>
如有写错，欢迎各位同仁指出问题谢谢！
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
1
0- 0
已为社区贡献4条内容
所有评论(0)