Promise基本使用
Posted 嘴巴嘟嘟
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Promise基本使用相关的知识，希望对你有一定的参考价值。
什么是Promise
有时候业务场景会是这种回调地狱的方式，很难分辨清除逻辑
Promise三种状态
链式调用
小案例
<!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>
</head>
<body>
<table>
<thead>
<tr>
<th>序号</th>
<th>书名</th>
</tr>
</thead>
<tbody id="dataList">
</tbody>
</table>
<h2>添加图书</h2>
<label for="name">
书名：<input type="text" name="name" id="book_name">
</label>
<input type="button" value="保存图书" id="getall">
</body>
<script src="./js/jquery.min.js"></script>
<script>
// Promise
var htmlStr = '';
new Promise((resolve, reject) => {
$.ajax({
type: "get",
url: "http://127.0.0.1:8000/show_books/",
contentType: "application/json",
success: function (response) {
resolve(response.list)
reject()
}
});
}).then((list) => {
list.forEach(element => {
htmlStr += '<tr><td>' +
element.fields.book_name
+ '</td><td>' + element.fields.add_time
+ '</td></tr>';
});
document.getElementById("dataList").innerHTML = htmlStr
}).catch(() => {
alert('请求失败')
})
// 使用原始的请求方式
/* var htmlStr = '';
$.ajax({
type: "get",
url: "http://127.0.0.1:8000/show_books/",
contentType: "application/json",
success: function (response) {
if (response.status = 200) {
var list = response.list;
list.forEach(element => {
htmlStr += '<tr><td>' +
element.fields.book_name
+ '</td><td>' + element.fields.add_time
+ '</td></tr>';
});
document.getElementById("dataList").innerHTML = htmlStr
} else {
alert("错误啦")
}
}
});
// 保存图书功能
document.getElementById("getall").onclick = () => {
var book_name = document.getElementById("book_name").value
$.ajax({
type: "GET",
url:'http://127.0.0.1:8000/add_book/?book_name='+String(book_name),
success: function (response) {
console.log(response)
if(response.msg=="success"){
alert('保存成功')
}
return location.replace(document.referrer);
}
});
} */
</script>
</html>
以上是关于Promise基本使用的主要内容，如果未能解决你的问题，请参考以下文章
html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。