promise

// 如果then在延迟执行函数中执行呢？
// 如果想要将value在多个then中传递呢?
// 那如果有很多then一起执行呢？

// 返回对象,执行then
function a() {
return {
then: function (value) {
var value = 1
console.log(value)
}
}
}

a().then()

// 函数中返回对象
function promise() {
this.then = function () {
var value = 1
console.log(value)
}
}

function a () {
return new promise()
}

a().then()

// 封装为对象, 同时操作value
function promise() {
this.then = function() {
var value = 1
console.log(value)
}
}

function a() {
return new promise()
}

a().then(1)
// 简化
new promise().then(1)

// 将自定义函数传入promise和then中，使promise对象更灵活
function promise(fn) {
this.then = function(callback) {
var value = 1
callback(value)
}

// 执行fn
fn()
}

var a = new promise(function() {
console.log('in a function, before then')
}).then(function (value) {
console.log(value)
})

// 在promise中对操作进行某些处理, 比如保留value, 传递到多个then中使用
function promise(fn) {
var callback = null

this.then = function(cb) {
callback = cb
}

function resolve(value) {
if (callback) {
callback(value)
}
}

// 将resolve作为参数传入, 执行fn, 即 function(resolve){console.log('in a function, before then'); resolve(1)}
// 执行完console.log后，调用参数resolve，并将1作为参数传入, 即function (1) { if (callbakc) {callback(1)} }
fn(resolve)
}

new promise(function(resolve) {
console.log('in a function, before then')
resolve(1)
}).then(function (value) {
console.log(value)
})

// 上述方法发现，then的方法没有执行，因为resolve执行时，callback为空，执行then时，callback有值，但没有执行
// 所以一种方案是在resolve中添加延迟执行函数 setTimeout，这样既能拿到value值，又能执行callback方法
function promise(fn) {
var callback = null

this.then = function(cb) {
callback = cb
}

function resolve(value) {
setTimeout(() => {
callback(value)
}, 1);
}

fn(resolve)
}

new promise(function(resolve) {
console.log('in a function, before then')
resolve(1)
}).then(function (value) {
console.log(value)
})

// 如果then在延迟执行函数中执行呢？
function promise(fn) {
var callback = null

this.then = function(cb) {
callback = cb
}

function resolve(value) {
setTimeout(function () {
callback(value)
}, 1);
}

fn(resolve)
}

var b = new promise(function(resolve) {
console.log('in a function, before then')
resolve(1)
})

setTimeout(function () {
b.then(function (value) {
console.log(value)
})
}, 100);

// 解决上述延迟不确定问题[then先执行resolve再执行 -> callback能否执行 和 resolve先执行then再执行 -> callback是否已经赋值 ]，
// 我们可以添加一个状态来判断是否执行callback[重新命名为deferred]: pending代表等待，resolved代表处理完
// 当添加一个状态时，提供一个公共的方法handle用来处理不同状态的业务，在不同场景改变不同的状态，调用handle方法去根据状态的处理，而不在多个场景中各自去处理，也不便维护
// 同时不同场景之间传递的数据只需在普通函数中声明一个属性就行[value, deferred]

// then先执行resolve再执行 这种情况我们之前已经处理，现在只处理另一种情况，所以resolve中setTimeout先去除，代码简化点
function promise(fn) {
var value = null
var state = "pending"
var deferred = null

this.then = function(onResolved) {
// then先执行
if (state === 'pending') {
deferred = onResolved
return
}

// resolve先执行
onResolved(value)

}

function resolve(newValue) {
value = newValue
state === 'resolved'

// then先执行
if (deferred) {
  deferred(newValue)
}

}

fn(resolve)
}

// 优化上述方法
function promise(fn) {
var value = null
var state = "pending"
var deferred = null

this.then = function(onResolved) {
handle(onResolved)
}

function resolve(newValue) {
value = newValue
state = 'resolved'

if (deferred) {
  handle(deferred)
}

}

function handle(onResolved) {
if (state === 'pending') {
deferred = onResolved
return
}

onResolved(value)

}

fn(resolve)
}

var b = new promise(function(resolve) {
console.log('in a function, before then')
resolve(1)
})

// resolve先执行then再执行
setTimeout(function () {
b.then(function (value) {
console.log(value)
})
}, 100);

// then先执行resolve再执行
b.then(function (value) {
console.log(value)
})

// 那如果有很多then一起执行呢？ -- 那就需要deferred成为数组，把每个then的方法push进去，resolve时pop出来，这里先不讨论这种情况，让代码看起来更简洁点

// 如何实现链式调用呢？ -- then每次返回都是promise,才能链式调用
// getSomeData().then(filterTheData).then(processTheData).then(displayTheData);

function promise(fn) {
var value = null
var state = "pending"
var deferred = null

this.then = function(onResolved) {
return new promise(function (resolve) {
handle({
onResolved: onResolved,
resolve: resolve
})
})
}

function resolve(newValue) {
value = newValue
state = 'resolved'

if (deferred) {
  handle(deferred)
}

}

function handle(handler) {
console.log(state)
if (state === 'pending') {
deferred = handler
return
}

if (deferred) {
  deferred(value)
  return 
}

console.log(this) // window window window window
console.log(value) // 1 [1, 2] [1, 2, 3] [1, 2, 3, 4]
var res = handler.onResolved(value)
handler.resolve(res);

}

fn(resolve)
}

var b = new promise(function(resolve) {
console.log('in a function, before then')
resolve(1)
}).then(function (results) {
console.log('first then ')
var results = [results]
results.push(2)
return results
}).then(function (results) {
console.log('second then')
results.push(3)
return results
}).then(function (results) {
console.log('third then')
results.push(4)
return results
}).then(function (results) {
console.log(results)
})
// 在第一个promise中已申明了value值，之后将handle传入新的promise中执行代码，闭包的作用，handle是全局window作用于，所以使用的是的value都指向同一个value，所以可以拿到同一个值

// 如果then中没有做任何处理，之后的then还能运行吗？ new promise(...).then().then(function(){console.log(1)})
// 这里我们只需做一点修改

function handle(handler) {
if (state === 'pending') {
deferred = handler
return
}

if (deferred) {
deferred(value)
return
}

if (!handler) {
return
}

console.log(this) // window window window window
console.log(value) // 1 [1, 2] [1, 2, 3] [1, 2, 3, 4]
var res = handler.onResolved(value)
handler.resolve(res);
}

// 如果then返回结果也是promise呢
// 我们只需要在resolve中去做相应的处理

function resolve(newValue) {
if(newValue && typeof newValue.then === 'function') {
newValue.then(resolve);
return;
}
state = 'resolved';
value = newValue;

if(deferred) {
handle(deferred);
}
}

// 当出现错误的时候，我们需要做一些处理，因此我们加入reject方法，和resolve差不多,也添加相应的状态rejected
// 这样至于执行什么操作，取决于state的状态

new promise(function(resolve, reject) {
var result = doSomething()
if (result.error) {
reject(result.error)
} else {
resolve(resule.value)
}
}).then(function(value) {
console.log('Success!', value);
}, function(error) {
console.log('Uh oh', error);
});

function promise(fn) {
var value = null
var state = "pending"
var deferred = null

this.then = function(onResolved, onRejected) {
return new promise(function (resolve, reject) {
handle({
onResolved: onResolved,
onRejected: onRejected,
resolve: resolve,
reject: reject
})
})
}

function resolve(newValue) {
if(newValue && typeof newValue.then === 'function') {
newValue.then(resolve);
return;
}
state = 'resolved';
value = newValue;

if(deferred) {
  handle(deferred);
}

}

function reject(reason) {
state = 'rejected';
value = reason;

if(deferred) {
  handle(deferred);
}

}

function handle(handler) {
if (state === 'pending') {
deferred = handler
return
}

var handlerCallback;

if(state === 'resolved') {
  handlerCallback = handler.onResolved;
} else {
  handlerCallback = handler.onRejected;
}

if(!handlerCallback) {
  if(state === 'resolved') {
    handler.resolve(value);
  } else {
    handler.reject(value);
  }

  return;
}

var ret = handlerCallback(value);
handler.resolve(ret);

}

fn(resolve, reject)
}

// 但是代码执行中，会出现各种错误，我们并不能全部处理，需要在执行resolve中去处理，而不去抛出异常
function handle(deferred) {
// ... as before

var ret;
try {
ret = handlerCallback(value);
} catch(e) {
handler.reject(e);
return;
}

handler.resolve(ret);
}