bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-3/ajaxV1.js Normal file
View File

@@ -0,0 +1,42 @@
class Http {
constructor() {
this.xhr = new XMLHttpRequest();
}
//获取地震了参数
get(params) {
var par = ""
for (const key in params.data) {
par += `&${key}=${params.data[key]}`
}
par = par.replace("&", "?")
this.xhr.open("GET", `${params.url}${par}`)
this.xhr.send()
this.ReadyState(params)
}
//数据请求方式
post(params) {
this.xhr.open("POST", `${params.url}`)
this.xhr.setRequestHeader('Content-Type', 'application/json');
this.xhr.send(JSON.stringify(params.data))
this.ReadyState(params)
}
ReadyState(params) {
this.xhr.onreadystatechange = () => {
if (this.xhr.readyState == 4) {
if (this, xhr.readyState == 200) {
var data = JSON.parse(this.xhr.response);
promise.success(data)
} else {
params.error(this, xhr)
}
}
}
}
}
var http = new Http();

48
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-3/ajaxV2.js Normal file
View File

@@ -0,0 +1,48 @@
class Http {
constructor() {
this.xhr = new XMLHttpRequest();
}
//获取地址栏参数 异步代码
get(params) {
return new Promise((success, error) => {
var par = ""
for (const key in params.data) {
par += `&${key}=${params.data[key]}`
}
par = par.replace("&", "?")
this.xhr.open("GET", `${params.url}${par}`)
this.xhr.send()
this.ReadyState(success, error)
})
}
//数据请求方式
post(params) {
return new Promise((success, error) => {
this.xhr.open("POST", `${params.url}`)
this.xhr.setRequestHeader('Content-Type', 'application/json');
this.xhr.send(JSON.stringify(params.data))
this.ReadyState(success, error)
})
}
ReadyState(success, error) {
this.xhr.onreadystatechange = () => {
if (this.xhr.status == 4) {
if (this. xhr.status == 200) {
var data = JSON.parse(this.xhr.response);
success(data)
} else {
error(this. xhr)
}
}
}
}
}
var http = new Http();

82
历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-3/ajax封装.html Normal file
View File

@@ -0,0 +1,82 @@
<!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>ajax封装</title>
<!-- <script src="./ajaxV1.js"></script> -->
<script src="./ajaxV2.js"></script>
</head>
<body>
</body>
<script>
//V1封装
//callback回调函数 解决：获取异步代码返回值 问题回调地狱
// http.post({
// url: 'http://127.0.0.1:3000/api/json/test_post',
// data: {
// id: 82,
// page: 1
// },
// success: (res) => {
// console.log(res);
// },
// error: (err) => {
// console.log("请求失败：",err);
// },
// })
//promise
// 主要获取异步编程返回值，避免和解决了回调函数的问题
// 让我们可以用同步的方式来编写异步代码
// 三种状态：
// 进行中 成功 失败
// 两种写法
// then catch 导致回调地狱
// async await 强制把异步转化为同步来执行
// promise 是异步还是同步？
// 1 promise 里面放的是异步代码
// 2 promise 里面的异步代码会被同步执行
// 3 then catch 是异步执行的
// 4 async await 同步执行
http.get({
url: 'http://127.0.0.1:3000/api/json/mechanismList',
data: {
id: 82,
page: 1
}
})
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
//a().b().c()链式调用
//实际项目中使用
// var getdata = async () => {
// var result = await http.get({
// url: 'http://127.0.0.1:3000/api/json/mechanismList',
// data: { id: 82, page: 1 }
// })
// console.log(result);
// }
// getdata()
// //V2封装
// var getdata = async () => {
// var result = await http.get({
// url: 'http://127.0.0.1:3000/api/json/mechanismList',
// data: { id: 82, page: 1 }
// })
// console.log(result);
// }
// getdata()
</script>
</html>