基本概念
个人理解就是使用同步编程的写法完成异步编程操作。
const promise = new Promise((resolve, reject) => {
//some asynchronous code
setTimeout(() => {
console.log('执行完成');
resolve('some data');
}, 2000);
});
Promise 接收一个函数作为参数，函数有两个参数，resolve 和 reject 分别表示异步操作执行后成功的回调函数和失败的回调函数。
Promise 实例后马上执行。所以通常采用一个函数包含它
function runAsync() {
return new Promise((resolve, reject) => {
//some asynchronous code
setTimeout(() => {
console.log('执行完成');
resolve('some data');
}, 2000);
});
}
runAsync().then((data) => {
console.log(data);//可以使用异步操作中的数据
})
runAsync() 执行完调用 then 方法，then() 就相当于我们之前写的回调函数。
resolve 和 reject
function paramTest(){
return new Promise((resolve, reject) => {
let number = Math.ceil(Math.random() * 10);
if (number < 5) {
resolve(number);
}else{
reject('out of range');
}
})
}
paramTest().then((number) => {
console.log('resolved');
console.log(number);
},(reason) => {
console.log('rejected');
console.log(reason);
})
Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）
paramTest() 例子有两种情况：
- 当
number < 5时，我们认为是成功情况，将状态从pending变为fulfilled - 当
number >= 5时，我们认为是失败情况，将状态从pending变为rejected
所以
paramTest()的执行结果：
| fulfilled | rejected |
|---|---|
| resolved | rejected |
| number | out of range |
catch的用法
我们继续调用
paramTest方法举例
paramTest().then((number) => {
console.log('resolved');
console.log(number);
console.log(data); //data为未定义
},(reason) => {
console.log('rejected');
console.log(reason);
}).catch((err) => {
console.log(err);
})
catch 方法其实就是 .then(null, rejection) 的别名，也是用来处理失败失败的回调函数，但是还有一个作用：当 resolve 回调中如果出现错误了，不会堵塞，会执行 catch 中的回调。
all的用法
const p = Promise.all([p1, p2, p3]);
p.then(result => {
console.log(result);
})
all方法接收一个数组参数，数组中每一项返回的都是Promise对象，只有当p1, p2, p3都执行完才会进入then回调。p1, p2, p3返回的数据会以一个数组的形式传到then回调中。
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('p1');
}, 1000);
})
.then(result => result)
.catch(e => e);
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('p2');
}, 3000);
})
.then(result => result)
.catch(e => e);
Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
//3秒后输出['p1', 'p2']
race的用法
const p = Promise.race([p1, p2, p3]);
p.then(result => {
console.log(result);
})
race的用法与all如出一辙，不同的是all方法需要参数的每一项都返回成功了才会执行then;而race则是只要参数中的某一项返回成功就执行then回调。
以下是
race的例子，和all方法对比，可以看到返回值有很明显的区别。
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('p1');
}, 1000);
})
.then(result => result)
.catch(e => e);
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('p2');
}, 3000);
})
.then(result => result)
.catch(e => e);
Promise.race([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
//1秒后输出 'p1'
点击这里查看本文中实例源代码
resloader是基于Promise实现的一个图片预加载并展示加载进度的插件，猛戳这里了解详情。如果感觉还可以的话，欢迎star
