How to implement promises in JavaScript (code example)

This article brings you an introduction to the method of reading CSV files in PHP (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

let promise = new Promise((resolve111, reject) => {
    //这里放入我们要执行的函数，可能是同步，也可能是异步, 这里我们就来写一个异步的执行
    setTimeout(() => {
        resolve111('hello');
    }, 100)
})
    
promise.then(data => {
    console.log(data);
    return new Promise(function(res, rej) {
        setTimeout(function() {
            console.log(2);
            res();
        }, 100)
    })
}, err => {console.log(err)})

The execution flow of promise is as follows:

var i = 1
function Promise(fn) {
    this.id = i++;
    this.status = 'PENDING';
    this.value = null;
    this.deffered = [];
    fn.call(this, this.resolve.bind(this), this.reject.bind(this))
}

Promise.prototype = {
    constructor: Promise,
    then: function(onfulfilled, onrejected) {
        var obj = {
            onfulfilled: onfulfilled,
            onrejected: onrejected
        }
        obj.promise = new this.constructor(function() {});
        console.log(this.status)
        if (this.status === 'PENDING') {
            this.deffered.push(obj);
        }
        console.log(this.deffered)
        return obj.promise;
    },
    resolve: function(data) {
        this.status = 'FULFILLED';
        this.value = data;
        this.deffered.forEach(item => {
            let p = item.onfulfilled(this.value);
            if (p && p.constructor === Promise) {
                p.deffered = item.promise.deffered;
            }
        });
    },
    reject: function(err) {
        this.status = 'REJECTED';
        this.value = err;
        this.deffered.forEach(item => {
            let p = item.onrejected(this.value);
            if (p && p.constructor === Promise) {
                p.deffered = item.promise.deffered;
            }
        });
    }
}

The then method needs to return a new sub-Promise, and the previous and following Promise A connection needs to be established in order to decide the order in which they should be performed. Here each promise is identified by id.

In the Promise chain operation, how is the execution order guaranteed?

Each promise is followed by an object. The object contains three attributes: onfulfiled, onrejected, and sub-promise. When the state of the parent promise is changed and the corresponding onfulfiled/onfulfiled is executed, the child promise is obtained, and the state of the child promise is changed, and then the corresponding onfulfiled/onfulfiled is executed. Loop in sequence until the current promise has no sub-promise

How to get the asynchronous value in the thenable function

Place the resolve/reject function and onfulfiled/onrejected Into the same object (promise object), set the value to this.value=xxx when resolve/reject. When onfulfiled/onrejected is executed, onfulfiled(this.value) can be used.

To avoid dizziness here, explain that onfulfilled and onrejected refer to the two functions in then.

State mechanism switching

As shown in the figure, the status can only be changed by pending-->fulfilled, or by pending-->rejected.

As long as these two situations occur, the status will be solidified and will not change again. This result will always be maintained. Even if the change has already occurred, if you add a callback function to the Promise object, you will get the result immediately. This is completely different from an event. The characteristic of an event is that if you miss it and listen again, you will not get the result.

The above is the detailed content of How to implement promises in JavaScript (code example). For more information, please follow other related articles on the PHP Chinese website!