ES6 封装Promise

<script>
    //   class Promise
    // class 类  类别的意义
    // 为什么
    //   构造函数
    // function Person(name, age = 0) {
    //     this.name = name; //有this 返回
    //     this.age = age;
    // }
    // // 1不看构造体无法知道是构造函数
    // // 2 构造函数当普通函数执行

    // //ES6 class

    // class Animal {

    // }
    // new Animal()
    // console.log(typeof Animal) //function
    //语法糖 糖衣 语法

    //函数声明 VS class 声明

    // let p = new Person

    // function Person(name, age = 0) {
    //     this.name = name;
    //     this.age = age;
    //     this.showMsg = function() {
    //         console.log(this.name, this.age);
    //     }
    // }
    // console.log(Person.prototype.constructor === Person) //true

    // 为什么用原型 
    //节省空间 增加代码复用

    // Person.prototype.showMsg = function() {
    //     console.log(this.name, this.age);
    // }


    // // Animal.prototype.XXX  原型不用
    // // let dog = new Animal//报错
    // class Animal {
    //     // class 声明的类不存在声明提升和重复声明\
    //     constructor(name, age = 0) {
    //         this.name = name;
    //         this.age = age;
    //         this.showName = function() {
    //             console.log(this.name);
    //         }
    //     }

    //     // 默认定义在原型上
    //     showName() {
    //         console.log(this.name);
    //     }
    //     showAge() {
    //             console.log(this.age);
    //         }
    //         // static a = 2;不支持静态属性
    //     static creatDemo() {
    //         // 静态方法
    //         return new Animal(name);
    //     }
    // }
    // let p = new Person("wangxiaobao", 12)
    // let dog = new Animal('wangwang', 3)
    //     // console.log(Animal.prototype.constructor === Animal) //true

    // // class
    // //构造函数 constructor
    // // 定义在原型链上的函数 除了 constructor以外的函数
    // // 静态方法，通过static声明的函数
    // // Object.is(NaN, NaN) 增强的绝对的等于 === 静态方法

    // 一等公民class  function 

    //function
    //函数的参数
    //可以被返回
    // 可以立即执行
    // 可以赋值给别人

    // //作为参数
    // function crearObject(classDefind) {
    //     return new classDefind();
    // }

    // //可以被返回
    // let obj = new new crearObject(class {
    //     constructor() {
    //         this.type = 'node';
    //     }
    // })

    // //立即执行
    // let obj = new class {
    //     constructor(value) {
    //         this.value = value
    //     }
    // }('dg')

    //class生成器方法
    // class IteratorArray {
    //     constructor(arr = []) {
    //             this.arr = arr
    //         } *
    //         [Symbol.iterator]() {
    //             yield* this.arr[Symbol.iterator]()
    //         }
    // }
    // let arr = new IteratorArray([1, 2, 3, 4])
    // for (let item of arr) {
    //     console.log(item);
    // }

    // // new IteratorArray() for of [Symbol.iterator]

    // 继承
    // 增加代码复用

    // function Animal(name, age) {
    //     this.name = name;
    //     this.age = age;
    // }

    // function Person(name, age) {
    //     Animal.call(this.name, this.age)
    // }

    //圣杯模式

    // function Animal(name){
    //     this.name = name
    // }
    // Animal.prototype.showName(){
    //     console.log(this.name)
    // }
    // function Person(name){
    //     Animal.call(this,name)
    // }
    // Person.prototype = Animal.prototype;
    // Person.prototype = Object.create(Animal.prototype);
    // let p = new Person('wxb');

    // class Animal {
    //     constructor(name) {
    //         this.name = name
    //     }
    //     showMsg() {
    //         console.log(this.name)
    //     }
    //     eat() {
    //         console.log("animal eat")

    //     }
    // }
    // Animal.prototype.type = "Animal"

    // class Person extends Animal {
    //     constructor(name) {
    //         super(name)
    //         this.width = 10;
    //     }
    //     eat() {
    //         console.log(super.type)
    //         console.log("person eat")
    //     }
    //     show() {
    //         super.showMsg()
    //     }
    // }
    // let p = new Person("dg");
    // //子类 派生类
    // // super 作为函数执行调用父类的构造函数 默认this指向当前对象
    // // 子类必须调用super函数
    // // super 作为对象时候 指向父类的原型 并自动绑定当前函数的this

    // Promise 
    // 为什么要用 Promise (承诺)
    // 异步编程
    // 回调函数

    // $.ajax({
    //     type,
    //     url,
    //     success(data) {
    //         $.ajax({
    //             type,
    //             url,
    //             success(data1) {
    //                 $.ajax({
    //                     type,
    //                     url,
    //                     success(data2) {

    //                     },
    //                     error() {

    //                     }
    //                 })
    //             },
    //             error() {

    //             }
    //         })
    //     },
    //     error() {

    //     }
    // })

    // A(
    //     B(
    //         C(
    //             D(
    //                 E()
    //             )
    //         )
    //     )
    // )
    // A
    // S1 pending => success / error
    // B
    // S2 pending => success / error
    // C
    // S3 pending => success / error
    // D
    // S4 pending => success / error
    // E

    // let p = new Promise(function(resolved, reject) {
    //     resolved()
    // })
    // let s1 = new Promise((resolved, reject) => {
    //         // resolved(1)
    //         setTimeout(() => {
    //             console.log('a is finished');
    //             resolved('yes')
    //         }, 2000)
    //     })
    // s1.then(() => {
    //     console.log('ok')
    // }, () => {
    //     console.log('no')
    // }
    // )
    // let s2 = s1.then(data => console.log(data),
    //     err => console.log(err))
    //     then 返回Promise对象

    // function myAjax(url, data = null, type = "GET") {
    //     return new Promise(function(resolved, reject) {
    //         $.ajax({
    //             type,
    //             url,
    //             data,
    //             success() {
    //                 resolved(data)
    //             },
    //             error() {
    //                 reject(err)
    //             }
    //         })
    //     })
    // }
    // let p = myAjax('api.douban.com').then(data => console.log(data),
    //     err => console.log(err))




    //  Promise
    //  loadUrl

    // var img = new Image();
    // img.onload = function(){

    // }
    // img.onerror = function (){

    // }
    // img.src = 'xxx.png'
    // function loadUrl(url) {
    //     let img = new Image();
    //     return new Promise((resolve, reject) => {
    //         img.onload = function() {
    //             resolve(img)
    //         }
    //         img.onerror = function() {
    //             reject(`${url} is not an effective URL`)
    //         }
    //         img.src = url;
    //     })
    // }

    // 细致 Promise 用法
    // Promise.resolve() Promise.reject() Promise.all() Promise.race()
    // Promise.prototype.then Promise.prototype.catch
    // let p = new Promise((resolved, reject) => {
    //     resolved()
    //     reject()
    // })
    // let p1 = p.then(data => console.log(data), err => console.log(err + 'err'))
    //     // p1 instanceof Promise = true
    // p1.then(data => console.log(`suc data is ${data}`), err => console.log(`err data is ${err}`))

    // Promise 对象的状态不可逆
    // then 会返回 Promise 对象,对应毁掉函数中的返回值（return） 作为返回的 Promise 对象的data 
    // then 方法的返回值是 非 Promise 对象  返回的 Promise 对象的状态 为 resloved
    // then 方法的返回值是 Promise 对象  返回的 Promise 对象的状态 由 里面返回 Promise 对象决定

    // Promise.all Promise.race
    // let p1 = Promise.resolve(1);
    // let p2 = new Promise((resolve, reject) => {
    //     setTimeout(() => {
    //         resolve(2)
    //     }, 2000)
    // })
    // let p3 = new Promise((resolve, reject) => {
    //         setTimeout(() => {
    //             resolve(3)
    //         }, 2000);
    //     })
    //     // let P = Promise.all([p1, p2, p3])
    //     // P.then(data => console.log(data), err => console.log(err))
    // let P = Promise.race([p1, p2, p3])
    // P.then(data => console.log(data), err => console.log(err))


    //为什么不看源码？
    //1.代码 28 定则

    class myPromise {
        constructor(fn) {
            if (typeof fn !== "function") {
                throw TypeError(`myPromise resolve ${fn} is not a function`)
            }

            this.status = 'pending'
            this.data = undefined

            let resolve = (value) => {
                if (this.status === 'pending') {
                    this.status = 'resolved'
                    this.data = value
                }
            }
            let reject = (value) => {
                if (this.status === 'pending') {
                    this.status = 'rejected'
                    this.data = value
                }
            }
            fn(resolve, reject)
        }
        then(resolveFn, rejectFn) {
            if (this.status == 'resolved') {
                // console.log('resolve')
                let res = resolveFn(this.data)
                if (res instanceof myPromise) {
                    console.log('It is myPromise')
                    console.log(this.data)
                } else {
                    console.log('No myPromise')
                }
            }
            if (this.status == 'rejected') {
                // console.log('reject')
                let res = rejectFn(this.data)
                if (res instanceof myPromise) {
                    return res
                } else {
                    myPromise.resolve(res)
                }
            }
        }
        static resolve(data) {
            return new myPromise(function(suc) {
                suc(data)
            })
        }
        static reject(data) {
            return new myPromise(function(resolve, reject) {
                reject(data)
            })
        }
    }

    //测试
    let mp = new myPromise(function(suc, err) {
        err(1)
    })
    mp.then(null, data => new myPromise(function(resolve, reject) {
        reject(data + 1)
    })).then(null, data => console.log(data + 'err'))复制代码