这篇文章是考虑如何自己实现一个简单 Promise,用以理解 Promise。
实现如下要求:
doSomething().then(function(res){ // res 是 doSomething() 的结果
doSomethingElse(res);
});
使用原生Promise方法,代码会如下:
function doSomething() {
var result = 1;
return new Promise(function (resolve) {
resolve(result);
});
}
function doSomethingElse(arg) {
console.log(arg);
}
doSomething().then(function (res) {
doSomethingElse(res); // 输出 1,然后返回结果是一个 Promise 对象,可以继续链式调用 then 方法
});
接下来仿制一下这个 Promise 函数:
FPromise 是有状态的(Pending、Fulfilled、Rejected)
function FPromise(fn) {
var status = "Pending"; // 初始状态
var res = null;
function handleFulfilled(value) {
status = "Fulfilled";
res = value;
}
function handleRejected(reason) {
status = "Rejected";
res = reason;
}
function handle(handler) {
var callback = null;
if (status == "Fulfilled") {
callback = handler.onFulfilled;
} else if (status == "Rejected") {
callback = handler.onRejected;
}
callback(res);
}
this.then = function (onFulfilled, onRejected) {
handle({
onFulfilled: onFulfilled,
onRejected: onRejected
})
}
fn(handleFulfilled, handleRejected);
}
和原生 Promise的调用方法一样,把 Promise 换成 FPromise 如下:
function doSomething() {
var result = 1;
return new FPromise(function (resolve) { // 和 Promise 一样调用
resolve(result);
});
}
function doSomethingElse(arg) {
console.log(arg);
}
doSomething().then(function (res) {
doSomethingElse(res); // 输出 1,但是没有返回结果,无法继续链式调用 then 方法
});
使用 reject 的情况如下:
function doSomething() {
var result = 2;
return new FPromise(function (resolve, reject) {
if (result == 1) {
resolve(result);
} else {
reject("error");
}
});
}
doSomething().then(null, function (reason) {
console.log(reason) // 输出 ‘error’
});
上面的 FPromise 函数无法进行链式调用,需要在 then 方法中再返回一个新的 FPromise,继续修改之
function FPromise(fn) {
var status = "Pending"; // 初始状态
var res = null;
function handleFulfilled(value) {
status = "Fulfilled";
res = value;
}
function handleRejected(reason) {
status = "Rejected";
res = reason;
}
function handle(handler) {
var callback = null;
if (status == "Fulfilled") {
callback = handler.onFulfilled;
} else if (status == "Rejected") {
callback = handler.onRejected;
}
if (callback) {
var tmp = callback(res);
if (status == "Fulfilled") {
handler.resolve && handler.resolve(tmp); // 第二个 FPromise 里面的参数是第一个 FPromise 执行的结果
} else if (status == "Rejected") {
handler.reject && handler.reject(tmp);
}
}
}
this.then = function (onFulfilled, onRejected) {
return new FPromise(function (resolve, reject) {
handle({
onFulfilled: onFulfilled,
onRejected: onRejected,
resolve: resolve, // 相当于下一个promise 的onFulfilled 方法
reject: reject
})
});
}
fn(handleFulfilled, handleRejected);
}
链式调用 then 方法如下,
function doSomething() {
var result = 1;
return new FPromise(function (resolve) {
resolve(result);
});
}
function doSomethingElse(arg) {
console.log(arg);
}
doSomething().then(function (res) {
doSomethingElse(res); // 输出 1
return res;
}).then(function (res) {
console.log(res + 1); // 输出 2
});
本文实现的方法只能用于参考Promise的原理,还有很多特性没有实现,比如 race,all 方法的实现。一个更好的实现参考https://github.com/LucaslEliane/fake-promise/blob/master/fake-promise.js。MDN 文档中推荐的是 Promise-Polyfill。
如何更好的使用Promise可以参考这个文章https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html
来源:https://blog.csdn.net/YZ0826/article/details/79943278
Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一,Promise 是一个构造函数, new Promise 返回一个 promise对象 接收一个excutor执行函数作为参数
Async/Await替代Promise的6个理由:Async/Await是近年来JavaScript添加的最革命性的的特性之一。它会让你发现Promise的语法有多糟糕,而且提供了一个直观的替代方法。
本文写给有一定Promise使用经验的人,如果你还没有使用过Promise,这篇文章可能不适合你,Promise标准中仅指定了Promise对象的then方法的行为,其它一切我们常见的方法/函数都并没有指定.
Promise 想必大家十分熟悉,想想就那么几个 api,可是你真的了解 Promise 吗?本文根据 Promise 的一些知识点总结了十道题,看看你能做对几道。