How to solve the callback hell problem with Vue Promise

question

First, what is callback hell:

• Layer nesting problem.
• There are two possibilities (success or failure) in the processing results of each task, so you need to deal with these two possibilities separately after each task is executed.

When an interface needs to rely on request data from another interface, there are usually two solutions.

• Set the interface to request data to synchronize, and then click another interface
• Calling another interface in the successful callback of the requested data interface

These two problems are particularly prominent in the callback function era. Promise was born to solve these two problems.

A typical higher-order function, passing the callback function as a function parameter toreadFile. But over time, you will find that there are also big pits in this way of incoming callbacks, such as the following:

('', (err, data) => {
    ('', (err, data) => {
        ('', (err, data) => {
            ('', (err, data) => {
            });
        });
    });
});

Nested callbacks are also called callback hell. This kind of code is very poor readability and maintainability because there are too many nesting levels. There is also a serious problem, that is, each task may fail, and the failure of each task needs to be handled in the callback, which increases the degree of confusion in the code.

Solution

Promise uses three major technical means to solve callback hell:

• Callback function delays binding.
• Return value penetration.
• Error bubbles.

Let me give you an example first:

let readFilePromise = (filename) => {
    (filename, (err, data) => {
        if(err) {
            reject(err);
        }else {
            resolve(data);
        }
    })
}
readFilePromise('').then(data => {
    return readFilePromise('')
});

Seeing that there is no, the callback function is not declared directly, but is passed in through the then method afterwards, that is, delayed in. This is the delayed binding of the callback function.

Then we do the following fine tuning:

let x = readFilePromise('').then(data => {
    return readFilePromise('')//This is the return Promise});
(/* Internal logic omitted */)

We willthenCreate different types of incoming values ​​of callback functionsPromise, and then returnPromisePenetrate to the outer layer for subsequent calls. Here x refers to the internal returnPromise, and then the chained calls can be completed in turn after x.

This is the effect of the return value penetration.

These two techniques work together to write deep nested callbacks into the following form:

readFilePromise('').then(data => {
    return readFilePromise('');
}).then(data => {
    return readFilePromise('');
}).then(data => {
    return readFilePromise('');
});

This makes it look much more refreshing. More importantly, it is more in line with people's linear thinking mode and has a better development experience.

The combination of the two technologies produces the effect of chain calling.

This solves the problem of multi-layer nesting. Another problem is how to solve the problem of success and failure after each task execution is completed?

Promise adopts the wrong bubble method. Actually, it's very simple to understand. Let's take a look at the effect:

readFilePromise('').then(data => {
    return readFilePromise('');
}).then(data => {
    return readFilePromise('');
}).then(data => {
    return readFilePromise('');
}).catch(err => {
  // xxx
})

In this way, the errors generated before will be passed backwards and received by the catch, so there is no need to check for errors frequently.

This is the article about how to solve the hell problem of Vue Promise. For more related content on Vue Promise callback, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!