我们上次讨论了Promise.all()、Promise.race()、Promise.finally()
今天我们继续讨论Promise的两个常用API
可以这么说,resolve和reject撑起了Promise的半边天,我们平时用的最多的就是这两个API
准备工作
- 上一次我们用axios来实现ajax请求,因为axios也是返回的promise,可能有人会产生误导,这次我们用Jquery来实现ajax请求
- mock配置接口,用来模拟后台接口
resove()和reject()
我们知道Promise是一个构造函数,用来实例化一个Promise实例,
这个Promise构造函数,用一个函数来作为参数
这个作为参数的函数又有两个参数
第一个参数是resolve
第二个参数是reject
当然这两个参数都不是必填项
Promise有三个状态:等待,成功,失败
异步是一个耗时的过程,当在执行异步的时候,就是Promise的等待过程
当异步函数执行完,
如果异步执行成功,我们就调用resolve,将等待切换到成功
如果异步执行失败,我们就调用reject,将等待切换到失败
(类似于,有个判断,如果成功就执行resolve,如果失败就执行reject,需要我们手动切换)
过程不可逆,失败就是失败,不会再变,反之亦然
我们先看下mock的数据
{
"success":true,
"data": {
"name": "这是接口一的返回值"
}
}
再来看下我们的代码栗子:
<!DOCTYPE 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>promise</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script>
window.onload = () => {
new Promise((resolve, reject) => {
$.ajax({
url: "https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/promise1",
success: ({
data,
success
}) => {
if (success) {
resolve(data)
} else {
reject(data)
}
}
});
})
.then(res => {
console.log(res);
})
}
</script>
</body>
</html>
Jquery请求后台接口,如果返回的值是成功的,是我们想要的,就把data作为参数传递给resolve,然后就会执行then方法,最后输出
//=>{name: "这是接口一的返回值"}
有几点要声明
resolve, reject是形参,不是必须这么写
如下写法也可以
//省略。。
new Promise((aaa, bbb) => {
//省略。。
if (success) {
aaa(data)
} else {
bbb(data)
}
//省略。。
关于resolve和reject的参数介绍可以参考《ECMAScript 6 入门》,不再此赘述
使用场景
异步都可以使用Promise进行包装
ajax请求,图片加载
定时器
UI交互(点击事件等)
ajax请求
上面介绍了Promise的ajax请求的实现
图片加载
new Promise((resolve, reject) => {
const url ='http://www.qdtalk.com/wp-content/uploads/2018/11/bryan-goff-528709-unsplash-1.jpg'
const image = new Image();
image.onload = () => {
resolve(image);
};
image.onerror = () => {
reject(new Error("图片加载失败"));
};
//对image添加一些属性
image.src = url;
image.alt = '这是陌上寒个人博客的banner';
}).then(res=>{
console.log('图片加载成功,即将返回一个图片dom');
console.log(res);//=> <img src="http://www.qdtalk.com/wp-content/uploads/2018/11/bryan-goff-528709-unsplash-1.jpg" alt="这是陌上寒个人博客的banner">
})
这个栗子有点“hello world”,有以下场景可能会用到
- 当在处理图片懒加载的时候,
- 图片过大,可能加载失败
- 页面图片过多(页面就是由图片堆起来的)通过图片的加载,来实现加载的进度条。
定时器
我想定时器就没有必要通过Promie包装了,因为它本身就有一个回调函数
setTimeout((a, b) => {
console.log(a);//=>第一个参数
console.log(b);//=>第二个参数
}, 1000, '第一个参数', '第二个参数');
所以说用Promise包装定时器意义不大
UI交互
我们举一个常用的栗子=>模态框
当我触发某一个动作的时候,会弹出这个模态框,当你点击了确定或者取消都会进行与之相关的操作,我们在这里应用了Promise进行包装
代码如下,重点看js代码
<!DOCTYPE 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>promise</title>
<link rel="stylesheet" href="https://qdtalk.com/weixin/style1229.css">
</head>
<body>
<button id="myBtn">出现弹窗</button>
<div class="modal-wap">
<header>标题</header>
<article>
这是内容
</article>
<footer>
<button id="confirm">确定</button>
<button id="cancel">取消</button>
</footer>
</div>
<script>
function dom$(id) {
return document.getElementById(id);
}
function modelFun() {
return new Promise((resolve, reject) => {
dom$('confirm').onclick = () => {
resolve()
}
dom$('cancel').onclick = () => {
reject()
}
})
}
dom$('myBtn').onclick = () => {
document.querySelector('.modal-wap').style.display = 'block'
modelFun().then(() => {
console.log('你点击了确定');
}, () => {
console.log('你点击了取消');
})
.finally(() => {
document.querySelector('.modal-wap').style.display = 'none'
})
}
</script>
</body>
</html>
相信你的眼光,这是一个很漂亮的模态框!😂
点击“出现弹窗”按钮,出现模态框,模态框有两个按钮,取消和确定
我们对这个模态框进行了包装,如果点击了确定就执行resolve,如果点击了取消就执行reject,然后就会执行then方法
then方法,不是我们今天要介绍的内容,简单说:它也有两个参数,一个是resolve,另一个是reject
点了不同的按钮,执行了不同的事件
最后执行finally,不管是点击了取消还是确定,只要状态切换,都会关闭模态框
easy
以上就是关于resolve和reject的常用内容介绍
写java 还是很厉害的了