promise实现异步任务管理

Promise是一个构造函数,我们可以通过new 创建一个promise对象。

var p = new Promise((resolve,resject) =>{});
console.log(p);
输出:Promise {<pending>}
[[Prototype]]: Promisecatch: ƒ catch()constructor: ƒ Promise()
finally: ƒ finally()then: ƒ then()Symbol(Symbol.toStringTag): 
"Promise"[[Prototype]]: Object
[[PromiseState]]: "pending"
[[PromiseResult]]: undefined

可以看到promise实例有两个属性,一个是 PromiseState,另一个是PromiseResult。
PromiseState
PromiseState表示的是promise的状态,可以通过resolve()和reject进行状态的改变,状态一当改变不可以进行二次的更改。

var p = new Promise((resolve,resject) =>{
    resolve("js")
});
console.log(p);
输出:
Promise {<fulfilled>: 'js'}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "js"
var p = new Promise((resolve,reject) =>{
    reject("err");
    resolve("js");//不起效,因为reject("err")已经改变promise的状态
});
console.log(p);
输出:
Promise {<rejected>: 'err'}
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "err"

状态改变可以触发then()函数,then()函数会返回一个新的promise,实现链式调用

new Promise((resolve,reject) =>{
    resolve("js")
}).then(
    value => {
        console.log(value);
    },//状态改为fulfilled会调用
    err => {
        console.log(err);
    }状态改为会调用rejected
)
输出:js

catch()
当promise的状态改为rejected或者代码发生错误的时候会触发该函数的调用

new Promise((resolve,reject) =>{
    console.log(a);
}).then(
    value => {
        console.log(value);
    }
).catch(
    err => {
        console.log(err);
    }
    );
输出:
	  ReferenceError: a is not defined
    at <anonymous>:2:17
    at new Promise (<anonymous>)
    at <anonymous>:1:1

用定时器来模拟异步任务管理

new Promise(
    (resolve,reject) => {
        setTimeout(
            () => {
                var a = 1;
                console.log(a);
                resolve(a);
            }
        );
    }
).then(
    res => {
        return new Promise(
            (resolve,reject) => {
                setTimeout(
                    () => {
                        var b = res + 1;
                        console.log(b);
                        resolve(b);
                    }
                );
            }
        );
    }
).then(
    res => {
       console.log(res + 1);
    }
);
输出:1 2 3

版权声明:本文为bdh123b原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。