1.什么是Promise
Promise是异步编程的一种解决方案,比回调更合理更强大。从语法上来说,Promise是一个对象,从它可以获取异步操作的信息。 Promise对象有以下两个特点:
- 对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending、fulfilled和rejected。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态
- 一旦状态改变,就不会再改变。Promise对象的状态的改变只有两种可能 从pending变为fulfilled和从pending变为rejected
2.实现要点
1.promise的调用方式是链式调用,每次then方法会生成一个新的Promise实例
2.每个Promise实例自身维护一个回调处理处理队列。
3.具体实现
1.promise 构造函数 这一步将初始化Promise内部状态,并立即执行executor
function Promise(executor) {
let self = this;
self.status = 'pending';
self.value = undefined;
self.reason = undefined;
self.onResolved = [];
self.onRejected = [];
try {
executor(resolve, reject);
} catch (e) {
reject(e);
}
}
复制代码
2.then函数
每次promise执行then后都会返回一个新的promise;每次返回新的Promise对象(因为promise状态确定后 就是不能更改);then方方法中的成功或失败是一个可选参数
onfulfilled = typeof onfulfilled == 'function' ? onfulfilled : val => val;
onrejected = typeof onrejected === 'function' ? onrejected : err => {
throw err;
}
let self = this;
let promise2;
promise2 = new Promise((resolve, reject) => {
if (self.status === 'resolved') {
setTimeout(() => {
try {
let x = onfulfilled(self.value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0);
}
if (self.status === 'rejected') {
setTimeout(() => {
try {
let x = onrejected(self.reason);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0);
}
if (self.status === 'pending') {
self.onResolved.push(function () {
setTimeout(() => {
try {
let x = onfulfilled(self.value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0);
});
self.onRejected.push(function () {
setTimeout(() => {
try {
let x = onrejected(self.reason);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0);
});
}
})
return promise2;
复制代码
3.catch函数
catch 会捕获到没有捕获的异常
Promise.prototype.catch = function (onrejected) {
return this.then(null, onrejected)
}
复制代码
4.Promise相关方法实现
-
Promise.resolve
Promise.resolve(value)方法也会返回一个新的 Promise 实例,该实例的状态为rejected。
Promise.resolve = function (value) { return new Promise((resolve, reject) => { resolve(value); }) } 复制代码
-
Promise.reject
Promise.reject(reason)方法也会返回一个新的 Promise 实例,该实例的状态为rejected。
Promise.reject = function (reason) { return new Promise((resolve, reject) => { reject(reason) }) } 复制代码
-
Promise.race
const p = Promise.race([p1,p2,p3]) 复制代码
Promise.race方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。 上面代码中,只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数
Promise.race = function (promises) { return new Promise((resolve, reject) => { for (let i = 0; i < promises.length; i++) { let p = promises[i]; p.then(resolve, reject); } }) } 复制代码
4.Promise.all
Promise.all 方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。只有实例数组中的实例状态均变为 fulfilled,外层实例才会变成 fulfilled,此时实例数组的返回值组成一个数组,传递给外层实例的回调函数。实例数组中有一个被 rejected,外层实例的状态就变成 rejected,此时第一个被 reject 的实例的返回值,会传递给外层实例的回调函数。
Promise.all = function (promises) {
return new Promise((resolve, reject) => {
let results = []; let i = 0;
function processData(index, data) {
results[index] = data;
if (++i === promises.length) {
resolve(results);
}
}
for (let i = 0; i < promises.length; i++) {
let p = promises[i];
p.then((data) => {
processData(i, data);
}, reject);
}
})
}
复制代码
结语
promise 可以解决回调地狱的问题;多个异步请求可以同步最终结果;代码写起来更有流程感。 第一次写文章,不太会写,希望慢慢的会有进步,理解和思考问题也会更深层次。