190819-utils
Version:
尚硅谷大前端自定义工具函数库
102 lines (96 loc) • 2.44 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>手写ajax请求函数</title>
</head>
<body>
<button onclick="testGet()">发送GET请求</button><br>
<button onclick="testPost()">发送POST请求</button><br>
<button onclick="testPut()">发送PUT请求</button><br>
<button onclick="testDelete()">发送Delete请求</button><br>
<script src="../dist/atguigu-utils.js"></script>
<script>
const { axios } = aUtils
/* 1. GET请求: 从服务器端获取数据*/
function testGet() {
axios({
// url: 'http://localhost:3000/posts',
url: 'http://localhost:3000/posts2',
method: 'GET',
params: {
id: 1,
xxx: 'abc'
}
})
// axios.get('http://localhost:3000/posts', {params: {id: 1}})
.then(
response => {
console.log(response)
},
error => {
alert(error.message)
}
)
}
/* 2. POST请求: 服务器端保存数据*/
function testPost() {
axios({
url: 'http://localhost:3000/posts',
method: 'POST',
data: {
"title": "json-server---",
"author": "typicode---"
}
})
// axios.post('http://localhost:3000/posts', {title: 'aaa', author: 'bbb'})
.then(
response => {
console.log(response)
},
error => {
alert(error.message)
}
)
}
/* 3. PUT请求: 服务器端更新数据*/
function testPut() {
axios({
url: 'http://localhost:3000/posts/1',
method: 'put',
data: {
"title": "json-server+++",
"author": "typicode+++"
}
})
// axios.put('http://localhost:3000/posts/1', {title: 'aaa222', author: 'bbb222'})
.then(
response => {
console.log(response)
},
error => {
alert(error.message)
}
)
}
/* 2. DELETE请求: 服务器端删除数据*/
function testDelete() {
axios({
url: 'http://localhost:3000/posts/2',
method: 'delete'
})
// axios.delete('http://localhost:3000/posts/2')
.then(
response => {
console.log(response)
},
error => {
alert(error.message)
}
)
}
</script>
</body>
</html>