Brief analysis of the introduction and basic usage of Promise

Promise is a new solution for asynchronous programming introduced by ES6. The syntax of Promise is - a constructor,
Used to encapsulate asynchronous operations and obtain their success or failure results.

Promise constructor: Promise (executor) {}
Promise.prototype.then method
Promise.prototype.catch method

Basic use of Promise

Instantiating a Promise

new Promise()

It accepts one parameter when instantiating, which is a function.

This function has two parameters, resolve and reject.

var promise = new Promise((resolve,reject) => {
    // It is used to handle asynchronous operations})

We use timers here to simulate asynchronous operations

Promise has three states: in progress, successful, and failed.

var promise = new Promise((resolve,reject) => {
    // This is an asynchronous operation setTimeout(() => {
        // Here simulates obtaining data var data = 'obtained data'
        // After getting the data, we can call resolve and reject methods to change the state of the promise object resolve(data) // resolve can change the state of the promise object to success, reject() can change the state of the promise object to failure }, 1000);
})

Promise's then method

When the status of the promise object is success or failure, you can call the then method

The then method accepts two parameters, and both parameters are function type values

When the promise object is in a successful state, the first parameter of the then method is called

That is to say, when the state of the promise object is failed, the second parameter of the then method will be called

The second parameter is optional and can be omitted if you do not need to capture failures.

The parameters have a formal parameter, the successful function is called value, and the failed function is called err.

promise.then(value => {
// When resolve(data) is called in the asynchronous function, that is, when the state of the promise object is successful, the first parameter of the then method will be called console.log(value); // 'hello world' value is the data passed by the resolve() method}, err => {
   // When reject(data) is called in the asynchronous function, that is, when the state of the promise object is failed, the second parameter of the then method will be called console.log(err); // err is the data passed by the reject() method})

The return result of calling the then method is a Promise object, and the state of the object is determined by the execution result of the callback function.

If the result returned in the callback function is a non-promise type property, the status is successful and the return value is the successful value of the object

let data = promise.then((val) => {
    // console.log(val.result);
    // Return non-Promise // return val.result
 
    // Return Promise return new Promise( (resolve, reject) => {
        // resolve('ok')
        reject('err')
    })
}, err => {
console.log(err);
})
// Returns a non-Promise and the status is success. The return value is the success value of the object. // The return result is a Promise object. The object status is determined by the execution result of the callback function. // Throws an error and the status is failure. console.log(data);

So then can be called in a chain. For usage, please refer to the promise application example below.

Promise catch method

The catch method of promise is an alias of then(null, rejection) and is used to specify a callback when an error occurs

When the state of the Promise object is resolved, the specified callback function of the then method will be called

const promise = new Promise((resolve, reject) => {
    resolve('ok')
})
promise.then(val => {
    console.log(val); // ok
}).catch(err => {
    console.log(err);
})

If the status of promise is rejected, the callback function of the catch method will be called to handle this problem.

const promise = new Promise((resolve, reject) => {
    reject('err')
})
promise.then(val => {
    console.log(val);
}).catch(err => {
    console.log(err); // err
})

If an error occurs during the execution of the then method, it will also be captured by the catch method

const promise = new Promise((resolve, reject) => {
    resolve('err')
})
promise.then(val => {
    console.log('ok'); // ok
    throw 'Something went wrong! ! ' // Errors thrown in then will continue to be caught by catch}).catch(err => {
    console.log(err); // Something went wrong! !
})

The error of a promise object has a bubbling nature and will be passed back until it is caught. That is, the error will always be caught by the next catch.

const promise = new Promise((resolve, reject) => {
    resolve('ok')
})
promise.then(val => {
    return new Promise((resolve, reject) => {
        reject('err')
    })
})
.then(val => {
    return new Promise((resolve, reject) => {
        reject('err')
    })
})
.catch(err => {
    // All the errors generated above can be caught by catch console.log(err); // err
})

Generally speaking, do not define the rejected status callback function (that is, the second parameter of then) in the then method, but always use the catch method.

Promise App

Promise to read files, multiple files are called continuously

In this example we use the Node.js file module

// Read file information const fs = require('fs')

In the following code, we use promise to wrap the asynchronous function

Let's first look at the normal file reading operation

// Read file information const fs = require('fs')
 
// If the read fails, err is an error object, and if the read succeeds, data is the data fs.readFile('./01.txt', (err, data) => {
    // Determine whether an error occurs. If an error occurs, print the error object.
    if (err) {
        console.log(err);
        return
    }
    console.log(data.toString());
})

If we want to continue reading the file after the reading is successful, we need to continue using fs.readFile... in the callback function to read the file. If the nesting level is too high, a callback hell will be formed.

Next we use the Promise method to read the file

// Read file information const fs = require('fs')
 
const promise = new Promise((resolve, reject) => {
    fs.readFile('./01.txt', (err, data) => {
        if (err) return reject(err)
        resolve(data)
    })
})
 
promise.then(val => {
    console.log(val.toString());
    // Return a Promise object return new Promise((resolve, reject) => {
        fs.readFile('./02.txt', (err, data) => {
            if (err) return reject(err)
            resolve(data)
        })
    })
}, err => {
    console.log(err);
})
// The previous then returns a promise object, we can continue.then
.then(val => {
    console.log(val.toString());
    return new Promise((resolve, reject) => {
        fs.readFile('./03.txt', (err, data) => {
            if (err) return reject(err)
            resolve(data)
        })
    })
}, err => {
    console.log(err);
})
.then(val => {
    console.log(val.toString());
}, err => {
    console.log(err);
})

promise encapsulates ajax request

Encapsulates the ajax request and uses then to get the result, making the code look more concise and solving the problem of callback hell

const promise = new Promise((resolve, reject) => {
    // Create object const xhr = new XMLHttpRequest()
    // Initialize xhr.open("GET", 'https://api.apiopen.top/getSongPoetry?page=1&count=20')
    // Send xhr.send()
    // Bind event processing response result xhr.onreadystatechange = function () {
        // Judgment // Entering the last stage, all response bodies are returned if (xhr.readyState === 4) {
            // Determine the response code if (xhr.status >= 200 && xhr.status < 300) {
                // Indicates success // console.log(JSON.parse(xhr.response));
                resolve(JSON.parse(xhr.response))
            } else {
                reject(xhr.status)
            }
        }
    }
})
// Specify callback promise.then((val) => {
    console.log(val);
}, err => {
    console.log(err);
})

This is the end of this article about the introduction and basic usage of Promise. For more relevant content on Promise usage, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

JavaScript uses promise to handle multiple repeated requests
Detailed explanation of the initial use of Promise in JavaScript asynchronous programming
Teach you how to use Promise step by step
js uses Promise to implement simple Ajax caching
WeChat applet uses Promise to simplify callbacks
Using Promise in JS to implement traffic light example code (demo)

<<: Pure CSS implementation of radio and checkbox effect example

>>: Summary of common docker commands