Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Promise project construction

  • The self – promise folder

    • Lib holds js files

      • Promise. Js function

    • Index.html test promise

  • Promise.js function Base building (ES5 syntax)
// Customize the Promise function module

(function (window) {
    /* The Promise constructor excutor executor function (synchronization) */
    function Promise(excutor) {}/* The then method on the Promise prototype specifies that the successful and failed callback functions return a new Promise object */
    Promise.prototype.then = function (onResolved, onRjected) {}/* The catch method on the Promise prototype specifies that the failed callback returns a new Promise object */
    Promise.prototype.catch = function (onRjected) {}/* The resolve method of the Promise function object returns a successful Promise */ for the specified value

    Promise.resolve = function (value) {}The reject method of the Promise object returns a failed Promise */ that specifies reason

    Promise.reject = function (reson) {}/* The all method of the Promise function object returns a Promise, which fails only if all promises succeed */

    Promise.all = function (promises) {}/* The race method of the Promise function object returns a Promise, the result of which is determined by the first completed Promise */

    Promise.race = function (promises) {}// Expose the Promise function externally
    window.Promise = Promise}) (window)
Copy the code

Promise function

    // Define constants
    const PENDING = 'pending'
    const RESOLVED = 'resolved'
    const REJECTED = 'rejected'

    function Promise(excutor) {
        // Save the current promise
        const _that = this
        _that.status = PENDING // Assign the status attribute to the Promise object, starting with pending
        _that.data = undefined // Give the Promise object a property to store the result data
        _that.callbacks = []    {onResolved() {}, onRejected() {}}
        function resolve(value) {
            // If the current state is not pending, terminate
            if(_that.status ! == PENDING) {return
            }
            // Change the status to Resolved
            _that.status = RESOLVED
            // Save value data
            _that.data = value
            // If there are callbacks waiting to be executed, execute the callback immediately and asynchronously
            if (_that.callbacks.length > 0) {
                setTimeout(() = > { // Put all successful callbacks into the queue
                    _that.callbacks.forEach(callbacksObj= >{ callbacksObj.onResolved(value) }); }}})function reject(reason) {
            // If the current state is not pending, terminate
            if(_that.status ! == PENDING) {return
            }
            // Change the state to reject
            _that.status = REJECTED
            // Save value data
            _that.data = reason
            // If there are callbacks waiting to be executed, execute the callback immediately and asynchronously
            if (_that.callbacks.length > 0) {
                setTimeout(() = > { // Queue all failed callbacks
                    _that.callbacks.forEach(callbacksObj= >{ callbacksObj.onRjected(reason) }); }}})// Execute resolve Reject immediately within the executor
        // If an exception occurs, a failure is triggered
        try {
            excutor(resolve, reject)
        } catch (error) {
            reject(error)
        }


    }
Copy the code

Promise. Then method

    Promise.prototype.then = function (onResolved, onRjected) {
        onResolved = typeof onResolved === 'function' ? onResolved : value= > value
        // Specify the default failure callback to implement error, exception penetration key
        onRjected = typeof onRjected === 'function' ? onRjected : reason= > { throw reason }
        const _that = this
        // Return a new promise
        return new Promise((resolve, reject) = > {

            /* Call the specified function to handle changing the promise state of the return based on the result of execution */
            function handle(callback) {
                /* 1. If the promise of the return fails, reason is error 2. If the callback executes a non-promise return, the promise of the return succeeds, and value is the returned value 3. If the callback returns a promise, the return promise is the result of that promise */
                try {
                    const result = callback(_that.data)
                    // 3. If the callback returns a promise, the promise of return is the result of that promise
                    if (result instanceof Promise) {
                        // Basic syntax
                        // result.then(
                        // result =>resolve(value), // result =>resolve(value
                        // reason =>reject(reason) // if result fails, make the return promise fail
                        // )
                        // Compact syntax
                        result.then(resolve, reject)
                    } else {
                        // 2. If the callback returns a non-promise, the promise of return succeeds, and value is the returned value
                        resolve(result)
                    }
                    // 1. If an exception is thrown, the promise of return will fail. Reason is error
                } catch (error) {
                    reject(error)
                }
            }
            // The current state is pending
            if (_that.status == PENDING) {
                _that.callbacks.push({
                    onResolved(value) {
                        handle(onResolved)
                    },
                    onRjected(reason) {
                        handle(onRjected)
                    }
                })
            } else if (_that.status = RESOLVED) { // Asynchronously execute onResolved and change the PROMISE state if the resolve state is set
                setTimeout(() = > {
                    handle(onResolved)
                })
            } else { //'rejected'
                setTimeout(() = > { // If the state is Rejected, asynchronously implement onRejected and change the promise state
                    handle(onRjected)
                })
            }
        })
    }

Copy the code

Promise.catch

    // Just return an error
    Promise.prototype.catch = function (onRjected) {
        return this.then(undefined, onRjected)
    }

Copy the code

conclusion

  • I wrote the Promise function and then and catch methods today and the rest tomorrow
  • The class version will be rewritten tomorrow at….. Stay tuned for