82 lines
2.2 KiB
HTML
82 lines
2.2 KiB
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>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> |