观看之前请先熟悉promise的基本使用
在日常的使用中，我们可以知道，一个完整的promise应当包含成功、失败、进行中这三个状态，同时还有resolve，reject两个改变状态的成员函数。最后还会有一个then函数来接收promise的执行结果
在了解了上述的内容之后，一个promise的雏形就出来了
class myPromise {
constructor(executor) {
//默认状态为pending
this.status = 'pending'
//成功的默认值为undefined
this.successVal = undefined
//失败的默认值为undefined
this.errorVal = undefined
//初始化时调用传入的回调函数
executor(this.resolve,this.reject)
}
resolve = (data) => {
}
reject = (err) => {
}
then = (success_cb,error_cb) => {
}
}
这里要说明一下，then函数，可能在日常使用中大家都习惯性的只传入一个参数。其实then是有两个参数的，第一个参数是promise成功时调用，第二个参数是失败时调用。而我们熟知的catch函数，其实内部就是调用的then函数，只不过传入的是失败的回调
catch = (err_cb) => {
this.then(undefined, err_cb)
}
下面来完善一下几个函数的内容
resolve = (data) => {
if (this.status === 'pending') {
this.status = 'success'
this.successVal = data
}
}
reject = (err) => {
if (this.status === 'pending') {
this.status = 'error'
this.errorVal = err
}
}
then = (success_cb,error_cb) => {
setTimeout(() => {
if (this.status === 'success') {
success_cb(this.successVal )
}else if(this.status === 'error'){
success_cb(this.errorVal )
}
})
}
这样，一个简易版的promise就实现了。
接下来就需要去实现promise处理异步问题。
首先分析一下，出现了异步代码之后会发生什么情况：
通常使用一个有异步的promise会这样
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(123)
},2000)
})
这样我们在调用then的时候其实resolve还没有被执行，promise的状态也并没有变更。所以我们要做的就是讲then函数接收到的参数存起来，等到promise的状态变了之后再去调用他。这样就能做到处理异步问题了
constructor(executor) {
//默认状态为pending
this.status = 'pending'
//成功的默认值为undefined
this.successVal = undefined
//失败的默认值为undefined
this.errorVal = undefined
//存放成功的回调函数
this.successCallBackList = []
//存放失败的回调函数
this.errorCallBackList = []
//自动执行一次传入的回调函数
try {
executor(this.resolve, this.reject)
} catch (err) {
this.reject(err)
}
}
resolve = (data) => {
if (this.status === 'pending') {
this.status = 'success'
this.successVal = data
this.successCallBackList.forEach(fn => fn(this.successVal))
}
}
reject = (err) => {
if (this.status === 'pending') {
this.status = 'error'
this.errorVal = err
this.errorCallBackList.forEach(fn => fn(this.errorVal))
}
}
then = (success_cb,error_cb) => {
setTimeout(() => {
if (this.status === 'success') {
success_cb(this.successVal )
}else if(this.status === 'error'){
success_cb(this.errorVal )
}else{
this.successCallBackList.push(success_cb)
this.errorCallBackList.push(error_cb)
}
})
}
上面代码中就是在then里判断当前状态，如果为pending的话就将回调存入对应的数组，然后再resolve和reject函数中去遍历存放回调的数组并且一一执行里头的函数。
这样异步问题也处理好了。
接下来就是最重要的处理then的链式回调了。这也是promise的特色。
首先需要明白的一点是，promise的then函数会返回一个新的promise，这样我们才可以做到一直.then调用。其次，后面的then会拿到上一个then的返回值。
明白了这个概念之后我们就可以去着手写then函数了
then = (success_cb, error_cb) => {
const promise2 = new myPromise((resolve, reject) => {
if (this.status === 'success') {
setTimeout(() => {
try {
if (typeof success_cb !== 'function') {
resolve(this.successVal)
} else {
let x = success_cb(this.successVal)
resolvePromise(promise2, x, resolve, reject)
}
} catch (err) {
reject(err)
}
})
} else if (this.status === 'error') {
setTimeout(() => {
try {
if (typeof error_cb !== 'function') {
reject(this.errorVal)
} else {
let x = error_cb(this.errorVal)
resolvePromise(promise2, x, resolve, reject)
}
} catch (err) {
reject(err)
}
})
} else {
this.successCallBackList.push(() => {
setTimeout(() => {
try {
if (typeof success_cb !== 'function') {
resolve(this.successVal)
} else {
let x = success_cb(this.successVal)
resolvePromise(promise2, x, resolve, reject)
}
} catch (err) {
reject(err)
}
})
})
this.errorCallBackList.push(() => {
setTimeout(() => {
try {
if (typeof error_cb !== 'function') {
reject(this.errorVal)
} else {
let x = error_cb(this.errorVal)
resolvePromise(promise2, x, resolve, reject)
}
} catch (err) {
reject(err)
}
})
})
}
}
)
return promise2
}
/**
* @param promise2 promise1.then中返回的新的promise
* @param x promise1中then方法的回调函数返回的值
* @param resolve promise2的reslove回调
* @param reject promise2的reject回调
*/
function resolvePromise(promise2, x, resolve, reject) {
if (x === promise2) {
/**
* 如果x等于promis2 则抛出异常，防止陷入死循环 抛出的异常会被上一个promise的then方法捕获到并且直接走reject方法
*/
throw new TypeError('Chaining cycle detected for promise');
}
if (x instanceof myPromise) {
/**
* 如果 x 为 Promise ，则使 promise2 接受 x 的状态
* 也就是继续执行x，如果执行的时候拿到一个y，还要继续解析y
*/
x.then(y => {
resolvePromise(promise2, y, resolve, reject)
}, reject)
} else if (x !== null && ((typeof x === 'object') || (typeof x === 'function'))) {
try {
var then = x.then
} catch (e) {
return reject(e)
}
if (typeof then === 'function') {
let called = false //防止多次调用
try {
then.call(x, y => {
if (called) return
called = true
resolvePromise(promise2, y, resolve, reject)
}, err => {
if (called) return
called = true
reject(err)
})
} catch (err) {
if (called) return
called = true
reject(err)
}
} else {
resolve(x)
}
} else {
resolve(x)
}
}
resolvePromise函数就是处理上一个then函数的返回值的工具函数。
then函数里的逻辑大致上就是，返回一个新的promise，这个新的promise里可以访问到上一个promise的所有属性，同时可以通过调用自身的resolve和reject改变自身的状态，并将上一个promise的then函数的返回值作为参数保存下来，这样他自己的then函数就可以访问到这个值了。也就是我们所说的下一个then能拿到上一个then的返回值。而在then函数中可能返回各种情况的值，所以写了一个resolvePromise函数来处理各种情况。
以上就是一个完整的promise了。重要的就是理解then函数的链式回调。把这个搞明白了，整个promise也就豁然开朗了。
另外附上完整的代码
/**
* @param promise2 promise1.then中返回的新的promise
* @param x promise1中then方法的回调函数返回的值
* @param resolve promise2的reslove回调
* @param reject promise2的reject回调
*/
function resolvePromise(promise2, x, resolve, reject) {
if (x === promise2) {
/**
* 如果x等于promis2 则抛出异常，防止陷入死循环 抛出的异常会被上一个promise的then方法捕获到并且直接走reject方法
*/
throw new TypeError('Chaining cycle detected for promise');
}
if (x instanceof myPromise) {
/**
* 如果 x 为 Promise ，则使 promise2 接受 x 的状态
* 也就是继续执行x，如果执行的时候拿到一个y，还要继续解析y
*/
x.then(y => {
resolvePromise(promise2, y, resolve, reject)
}, reject)
} else if (x !== null && ((typeof x === 'object') || (typeof x === 'function'))) {
try {
var then = x.then
} catch (e) {
return reject(e)
}
if (typeof then === 'function') {
let called = false //防止多次调用
try {
then.call(x, y => {
if (called) return
called = true
resolvePromise(promise2, y, resolve, reject)
}, err => {
if (called) return
called = true
reject(err)
})
} catch (err) {
if (called) return
called = true
reject(err)
}
} else {
resolve(x)
}
} else {
resolve(x)
}
}
class myPromise {
//静态resolve方法，可以让使用者直接通过类来访问，不需要实例化这个类。同时以static关键字标识的属性不会被实例继承，只能通过类自身访问
static resolve() {
}
constructor(executor) {
//默认状态为pending
this.status = 'pending'
//成功的默认值为undefined
this.successVal = undefined
//失败的默认值为undefined
this.errorVal = undefined
//存放成功的回调函数
this.successCallBackList = []
//存放失败的回调函数
this.errorCallBackList = []
//自动执行一次传入的回调函数
try {
executor(this.resolve, this.reject)
} catch (err) {
this.reject(err)
}
}
resolve = (data) => {
if (this.status === 'pending') {
this.status = 'success'
this.successVal = data
this.successCallBackList.forEach(fn => fn(this.successVal))
}
}
reject = (err) => {
if (this.status === 'pending') {
this.status = 'error'
this.errorVal = err
this.errorCallBackList.forEach(fn => fn(this.errorVal))
}
}
then = (success_cb, error_cb) => {
const promise2 = new myPromise((resolve, reject) => {
if (this.status === 'success') {
setTimeout(() => {
try {
if (typeof success_cb !== 'function') {
resolve(this.successVal)
} else {
let x = success_cb(this.successVal)
//简易处理then
if(x instanceof myPromise){
if(x.status==='pending'){
x.then()
}else{
//x的状态不处于pending状态，则将新的promise的resolve和reject作为x的then函数的参数传入
//这样，当x的状态变更了，就会调用我们传入的resolve和reject。并且会将x的最终值传入。
x.then(resolve, reject)
}
}else{
resolve(x)
}
// resolvePromise(promise2, x, resolve, reject)
}
} catch (err) {
reject(err)
}
})
} else if (this.status === 'error') {
setTimeout(() => {
try {
if (typeof error_cb !== 'function') {
reject(this.errorVal)
} else {
let x = error_cb(this.errorVal)
resolvePromise(promise2, x, resolve, reject)
}
} catch (err) {
reject(err)
}
})
} else {
this.successCallBackList.push(() => {
setTimeout(() => {
try {
if (typeof success_cb !== 'function') {
resolve(this.successVal)
} else {
let x = success_cb(this.successVal)
resolvePromise(promise2, x, resolve, reject)
}
} catch (err) {
reject(err)
}
})
})
this.errorCallBackList.push(() => {
setTimeout(() => {
try {
if (typeof error_cb !== 'function') {
reject(this.errorVal)
} else {
let x = error_cb(this.errorVal)
resolvePromise(promise2, x, resolve, reject)
}
} catch (err) {
reject(err)
}
})
})
}
}
)
return promise2
}
catch = (err_cb) => {
this.then(undefined, err_cb)
}
}
在执行所有promise后，我正在尝试进行一些计算。但是proc从不调用:cbr_promise=Concurrent::Promise.execute{CbrRatesService.call}bitfinex_promise=Concurrent::Promise.execute{BitfinexService.call}proc=Proc.newdoputs10endConcurrent::Promise.all?([cbr_promise,bitfinex_promise]).then{proc}使用concurrent-ruby制作gem。例如，我是否应该创建一个每100毫秒
🖥️NodeJS专栏：Node.js从入门到精通🖥️博主的前端之路（源创征文一等奖作品）：前端之行，任重道远（来自大三学长的万字自述）🖥️TypeScript知识总结：TypeScript从入门到精通（十万字超详细知识点总结）🧑💼个人简介：大三学生，一个不甘平庸的平凡人🍬👉你的一键三连是我更新的最大动力❤️！文章目录1、浅拷贝要求思路代码2、简易深拷贝要求思路代码3、完整深拷贝要求思路代码1、浅拷贝要求补全JavaScript代码，要求实现一个对象参数的浅拷贝并返回拷贝之后的新对象。注意：参数可能包含函数、正则、日期、ES6新对象是对对象的参数进行浅拷贝，并不是直接对整个对象进行浅拷贝（整个
我有一个这样的字典:{go:['went','run'],love:['passion','like']}键的值是它的同义词。'getSynonymWords(word)'是一个异步函数，它返回一个promise，其中它的值是与传递的参数对应的同义词列表。我怎样才能像这样循环遍历对象以递归地获取另一个对象:{went:[],run:[],passion:[],like:[]}这是我的一段代码:functiongetRelatedWords(dict){returnnewPromise(function(resolve){varnewDict={};for(varkeyindict){i
我正在尝试使用$q.all等待所有promise都已解决，但它是在第一个promise完成后调用的!我做错了什么？functionsendAudits(audits){varpromises=[];$scope.sendAudits={progress:0};angular.forEach(audits,function(audit,idAudit){promises.push(saveAudit(audit));});$q.all(promises).then(function(data){console.log(data);},function(errors){console.lo
所以我试图将我的代码转移到“Promise世界”，并且在许多地方当我不得不使用异步功能“循环”时-我只是以这种方式使用递归functiondoRecursion(idx,callback){if(idx现在我正在尝试改变Promise世界，但我很困varPromise=require('bluebird')functiondoRecursion(idx){returnnewPromise(function(resolve){if(idx谢谢。 最佳答案 我会选择Promise.all方法。它所做的是等待数组中的所有promise都已
我正在使用ES6promises，这个函数的想法是遍历一组链接，并为每个链接查找一个图像并在找到图像后停止。在我编写的函数的这种情况下，最快的promise已解析，其他promise继续执行，因此我想要的是在第一个promise解析后立即停止执行剩余的promise。scrapImage(links){letpromises=links.map((l)=>getImageUrlAsync(l));returnPromise.race(promises);} 最佳答案 promise不会“执行”。它们是返回值，而不是函数。promis
背景我通常基于async.js编写node.js脚本来控制工作流程。有时我发现基于async.js，代码似乎仍然是一个“hell”。使用多个嵌套，代码不可读且难以维护。我在这里进行了一些搜索，发现了一些有用的资源——但其中大部分都是一般概念。所以我要问一个问题。如有任何反馈，我们将不胜感激。我的常用代码varrequest=require('request');varasync=require('async');vararray=[1,2,3,4,5,6];varurl='http://www.google.com';async.mapLimit(array,3,function(nu
我已经开始学习javascriptpromises。但我就是无法理解promise的概念。最让我困扰的是谁将Resolver和Reject函数传递给promise构造函数？请看这个Promise的例子:functiongetImage(url){returnnewPromise(function(resolve,reject){varimg=newImage()img.onload=function(){resolve(url)}img.onerror=function(){reject(url)}img.src=url})}现在谁确实传递了resolve和reject方法，正如我对j
我正在尝试使用RxJSv5beta为表单实现“保存类型”功能.当用户在文本字段中输入时，数据应该被发送到后端。我正在创建一个Rx.Subject来为新用户输入触发新事件(next())并将其与HTTP请求一起发布。我以这个问题为起点:RxJSwaituntilpromiseresolved但是，使用这篇文章中的解决方案，同时向后端发送请求。我的目标是只发送一个请求并推迟后续请求，直到正在运行的请求完成。完成请求后，应发出最后一个未决事件(就像debounceTime中的情况一样)以下代码段中的示例函数使用链接的SO问题中的方法。这将发送对所有输入值的请求。workaround函数使用存
我正在学习javascript中的类和继承。我认为以下是扩展现有对象的相当标准的方法，因为我从MDNdocsonObject.create中获得了样式。我期待看到“好的”，然后是“耶!你好'在控制台中，但我却出现了这个错误:UncaughtTypeError:#isnotapromiseatnewMyPromise(:5:17)at:19:6看起来Promise构造函数正在抛出异常，因为它可以告诉我我给它初始化的对象不是一个简单的Promise。我希望Promise构造函数将我的对象初始化为Promise对象，这样我就可以扩展该类。他们为什么不编写Promise构造函数来处理这种通用模