<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
/**
* Promise对象
* 1. 理解:
* Promise对象; 代表了未来某个将要发生的事件(通常是一个异步操作)
* 有了Promise对象,可以将异步操作以同步的流程表达出来,避免了层层嵌套的回调函数(俗称'回调地狱')
* ES6的Promise是一个构造函数,用来生成Promise实例
* 2. 使用Promise的基本步骤(2步)
*/
// 1: 创建Promise对象
/*
let promise = new Promise((resolve, reject) => {
// 初始化Promise状态为pending
// 2:执行异步操作
// ajax xxx query
// 如果执行成功
if(true){
resolve('执行成功') //修改Promise的转台为fullfilled
}else{
reject('执行失败') // 修改Promise的转台为rejected
}
}) */
// 2: 调用Promise的then()
/*
then
第一个函数是成功返回的时候执行
第二个函数是失败返回的时候执行
catch
异常的时候执行
promise.then(res => {
console.log(res)
},err => {
console.log(err)
}).catch(err => {
console.log(err)
})
*/
/**
* promise 对象的三种状态
* pending: 初始化状态
* fullfilled: 成功状态
* rejected: 失败状态
*/
/**
* 应用:
* 使用Promise实现超时处理
*
* 使用Promise封装处理Ajax请求
*/
/*
let request = new XMLHttpRequest()
reject.onreadystatechange = function(){}
request.responseType = 'json'
request.open('GET', 'http://www.baidu.com')
request.send()
*/
// 上面的代码 不可以执行 只做参考
let promise = new Promise((resolve, reject) => {
// 使用定时器模拟异步操作
setTimeout(() => {
console.log("send ajax!")
let flag = true;
if (flag) {
resolve("执行成功!")
} else {
reject("执行失败")
}
}, 1000)
})
promise.then(res => {
console.log('第一个函数:',res)
},err => {
console.log('第二个函数:',err)
}).catch(error => {
console.log("服务器开小差了!")
})
</script>
</html>
作者：彼岸舞
时间：2021\08\16
内容关于：前端知识库
本文属于作者原创,未经允许,禁止转发