04-axios的基本使用
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>
<link crossorigin="anonymous" rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="page-header">基本使用</h2>
<button cLass="btn btn-primary"> 发送GET请求 </button>
<button class="btn btn-warning"> 发送POST请求 </button>
<button cLass="btn btn-success"> 发送 PUT 请求 </button>
<button class="btn btn-danger"> 发送 DELETE 请求 </button>
</div>
<script>
const btns = document.querySelectorAll('button');
btns[0].onclick = function(){
axios({
method: 'GET',
url: 'http://localhost:3000/posts/1'
}).then(response=>{
console.log(Response)
})
}
btns[1].onclick = function(){
axios({
method: 'POST',
url:'http://localhost:3000/posts',
data: {
title: "今天天气不错,还挺风和日丽的",
author: "李四"
}
}).then(response => {
console.log(response);
})
}
btns[2].onclick = function(){
axios({
method: "PUT",
url:'http://localhost:3000/posts/3',
data:{
title:"今天天?不错,还挺风和日丽的",
author:"李四"
}
}).then(response => {
console.log(response);
})
}
btns[3].onclick = function(){
axios({
method: 'delete',
url: 'http://localhost:3000/posts/5'
}).then(response => {
console.log(response);
})
}
</script>
</body>
</html>