3 axios({})基本使用
2022-04-02 本文已影响0人
无知者3
1 get请求
axios({
method: 'GET',
url: 'http://localhost:3000/posts',
}).then(resp => {
console.log(resp)
})
})
image.png
2 post请求
axios({
method: 'POST',
url: 'http://localhost:3000/posts',
data: {
"title": "今日重大新闻",
"author": "佚名"
}
})
发送post请求后数据增加：
image.png
3 修改
axios({
method: "PUT",
url: 'http://localhost:3000/posts/3',
data: {
"title": "今日小新闻",
"author": "佚名"
}
}).then(resp => {
console.log(resp)
})
image.png
4 删除
axios({
method: "DELETE",
url: 'http://localhost:3000/posts/3'
}).then(resp => {
console.log(resp)
})
image.png
附录：
index.html
<!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>
<script src="../js/axios.min.js"></script>
</head>
<body>
<button class="get">get请求</button>
<button class="post">post请求</button>
<button class="put">put请求</button>
<button class="delete">delete请求</button>
<script>
//get请求
const btn_get = document.querySelector('.get')
btn_get.addEventListener('click', e => {
axios({
method: 'GET',
url: 'http://localhost:3000/posts',
}).then(resp => {
console.log(resp)
})
})
const btn_post = document.querySelector('.post')
btn_post.addEventListener('click', e => {
axios({
method: 'POST',
url: 'http://localhost:3000/posts',
data: {
"title": "今日重大新闻",
"author": "佚名"
}
}).then(resp => {
console.log(resp)
})
})
const btn_put = document.querySelector('.put')
btn_put.addEventListener('click', e => {
axios({
method: "PUT",
url: 'http://localhost:3000/posts/3',
data: {
"title": "今日小新闻",
"author": "佚名"
}
}).then(resp => {
console.log(resp)
})
})
const btn_delete = document.querySelector('.delete')
btn_delete.addEventListener('click', e => {
axios({
method: "DELETE",
url: 'http://localhost:3000/posts/3'
}).then(resp => {
console.log(resp)
})
})
</script>
</body>
</html>
