JS_Promise初步尝试

Promise

概念

• Promise对象用于一个异步操作的最终完成（包括成功和失败）及结果值得表示。

  • 简单的说，就是处理异步请求的；
  • Promise,表示承若做这件事，如果成功则怎么处理，失败则怎么处理

• 语法

new Promise(
    /* 传入一个函数，定义的函数是executor */
    funtion (resolve,reject){...}
)

---

executor

1. executor 是一个函数;有两个参数，第一参数为resolve，第二参数为reject;

   • resolve和reject均为函数
   • resolve和reject互斥，即只能执行其中一个函数
   • resolve和reject的函数返回值，可以传递

2. executor 内部通常会执行一些异步操作

   • 一旦完成，调用resolve函数，将Promise对象状态修改成fulfilled，即完成(成功)状态
   • 一旦完成，调用reject函数，将Promise对象状态修改成rejected，即失败状态

3. executor 函数在Promise构造函数执行时立即调用，resolve和reject作为实参传入

   • executor函数在Promise的构造函数返回对象前被调用，此处存疑

4. 如果executor 函数执行过程中 抛出一个异常，则promise 状态为rejected,即失败状态

   • 注意:executor 函数的返回值将被忽略

Promise状态

1. pending:初始状态，等待状态（既不是成功也不是失败状态)
   • 返回值举例：Promise { <pending> }
2. fulfilled：成功状态，意味着操作完成
   • 返回值举例：Promise { 'fulfilled' }
3. rejected：失败状态，意为着操作失败
   • 返回值举例：Promise { <rejected> 'reject' }

Promise.then(onFulfilled,onRejected)

• 第一个参数：onFulfifilled为函数，处理fulfilled状态的Promise对象；
• 第二个参数：onRejected为函数，处理rejected状态的Promise对象；
• 返回值：一个新的Promise对象

Promise.catch(onRejected)

• 只能处理rejected状态的Promise对象
• 为当前Promise对象添加一个拒绝回调onRejected函数，返回一个新的Promise对象

Promise提供了两个静态方法：

• Promise.resolve(value),返回一个fulfilled状态的新Promise对象
• Promise.reject(reason),返回一个rejected状态的新Promise对象

var myPromise = new Promise(
    function (reslove,reject){
        console.log("come in")
        setTimeout(() => {
            console.log('~~~~~~~~~~');
            // reslove('resolve'); // reslove和reject互斥，只能执行其中一个
            reject("reject");
    },3000);
    }
)

console.log(myPromise)

// then -- 两个参数，第一个参数onfulfilled处理成功状态，第二个参数onrejected处理失败状态
// 第一种情况，then中参数，onfulfilled、onrejected均未处理；
// myPromise什么状态，test就是什么状态；
var test1 = myPromise.then(undefined,undefined);
var test2 = myPromise.then(); // 等价上句

// 第二种情况，then中参数，onfulfilled处理，onrejected未处理；
// 1. myPromise成功，onfulfilled处理；myPromise返回值为Promise { 'resolve' },test返回值为Promise { undefined }
// 2. myPromise失败，onrejected未处理，myPromise什么状态，test就是什么状态
var test3 = myPromise.then(value => console.log(value,"2-fulfilled"),undefined)

// 1. myPromise成功，onfulfilled未处理;myPromise什么状态，test就是什么状态
// 2. myPromise失败，myPromise返回值为Promise { <rejected> 'reject' }，test返回值为Promise { undefined }
var test4 = myPromise.then(undefined,reason => console.log(reason,'2-reject'))

// 1. myPromise成功/失败，都会处理
// 2. myPromise返回自己的状态，test返回处理后的状态，且处理后test为成功状态
var test5 = myPromise.then(value => {console.log(value,'3-fulfilled'),reason => {console.log(reason,"3-reject")}})

// catch -- 单参，只能处理失败状态
// myPromise成功状态，myPromise什么状态，test就是什么状态
// myPromise失败状态，myPromise返回Promise { <rejected> 'reject' }，test返回Promise { undefined }
var test6 = myPromise.catch(reason => {console.log(reason,"4-catch")})

// Promise提供两个方法
// Promise.resolve(value) 返回状态为 fulfilled的Promise对象
// Promise.resolve(reason) 返回状态为 rejected的Promise对象

// myPromise为fulfilled状态
var test7 = myPromise.then(value => {console.log('fulfilled');return value},) // value可以传递；
var test8 = myPromise.then(value => {console.log('fulfilled');return [value,'fulfilled']},) // then也可以处理value，再传递

// then可以重新返回新的Promise对象，且能自己指定状态
var test9 = myPromise.then(value => {console.log('fulfilled');return Promise.resolve('fulfilled')}) // test为fulfilled状态
var test10 = myPromise.then(value => {console.log("rejected");return Promise.reject("rejected")}) // Promise { <rejected> 'rejected' }

// myPromise为rejected状态
var test11 = myPromise.then(undefined,reason => {console.log('rejected');return reason}) // reason可以传递;
var test12 = myPromise.then(undefined,reason => {console.log('rejected');return [reason,"rejected"]}) // then也可以处理reason,在传递
var test13 = myPromise.then(undefined,reason => {console.log('rejected');return Promise.resolve("fulfilled")}) // Promise { 'fulfilled' }
var test14 = myPromise.then(undefined,reason => {console.log('rejected');return Promise.reject("rejected")}) // Promise { <rejected> 'rejected' }


setInterval(() => {console.log(myPromise);
    console.log(test);
},1000)

console.log("===end===")

---

链式调用

var myPromise = new Promise(
    function (resolve,reject){
        console.log("come in ");
        data = 3;
        setTimeout(
                () => {(data > 5?resolve(`greater than ${data}`):reject(`less than ${data}`))},
            3000)
    }
)

let test1 = myPromise.then(
    value => {console.log(1,'fulfilled');return value}, 
    reason => {console.log(2,'rejected');return reason} // 2 rejected
)

let test2 = myPromise.catch(reason => {console.log(3,"rejected");return reason}) // 3 rejected

var test3 = test2.then(
    value => {console.log(4,value)}, // 4 less than 3,隐式return
    reason => {console.log(5,reason)}
).then(
    value => {console.log(6,value);
        return Promise.reject(`test2 -> new rejected Promise intance`)}, // 6 undefined
    reason => {console.log(7,reason)}
).catch(
    reason => {
        console.log(8,reason); // 8 test2 -> new rejected Promise intance
        return Promise.resolve(reason + '*'.repeat(3))
    }
).then(
    value => console.log(9,value), // 9 test2 -> new rejected Promise intance***,隐式return
    reason => console.log(10,reason)
)


setInterval(
    () => {console.log(myPromise);console.log(test3)},1000
)
 
console.log('===end===') // 观察异步运行状态

---

异步实例

• 异步执行效果
  • Promise是异步不阻塞，拿到间接状态，且在拿到最终结果之前不影响其他语句的执行
• 执行过程
  1. 函数定义，跳过
  2. 变量test定义
     • 虽然runAsync没有执行完成，但是test已经定义为test is Promise { }
     • 注意，不会影响其他语句的执行
  3. setInterval打印
     • 1秒后才会打印test;
     • 注意，不会影响其他语句的执行，即test指向的Promise对象该运行还运行、console.log该打印还打印
  4. console.log(’=end=’)
     • 优先打印，语句之间各执行各的，只不过其他语句没有拿到最终结果，此语句优先运行完毕

// 异步实例

// 1
function runAsync(x,y){
    let data = x + y;
    return new Promise(function (resolve,inject){
        setTimeout(() => {
            if (data > 5){
                console.log(`data greater than ${data}`)
                resolve(data)
            } else{
                console.log(`less than ${data}`)
                inject(data)
            };
        },3000);
    });
}

// 2
test = runAsync(3,4).then(
    value => {console.log(value);return Promise.reject(value + '*')}
).catch(
    reason => {console.log(reason);return Promise.resolve(reason + '*')}
).then(
    value => {
        console.log(value);
        console.log("Promise END");
        return value
    }
)

// 3
setInterval(
    // 3秒之前，test为Promise { <pending> };3秒之后test is Promise { '7**' }
    () => console.log(`test is`,test),1000 
)

// 4
console.log('===END===') // 观察异步运行状态