Javascript: From Promises to Async/Await

  • 时间:2020-09-17 11:25:43
  • 分类:网络文摘
  • 阅读:81 次

What are Promises in Javascript? and what are the async/await? If you are using Javascript, these technologies are something that you don’t want to miss.

Christmas Tree Code

Let’s take a look at the following code, where we use callbacks and that unavoidably make the code ugly, as code are nested inside each other.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function asyncMethod(message, counter, cb) {
    setTimeout(function() {
        console.log(message + " " + counter);
        cb(counter + 1);
    }, 500);
}
 
asyncMethod("A", 1, (x) => {
        asyncMethod("B", x, (x) => {
            asyncMethod("C", x, (x) => {
                asyncMethod("D", x, (x) => { });
            })
        })
    }
);
function asyncMethod(message, counter, cb) {
    setTimeout(function() {
        console.log(message + " " + counter);
        cb(counter + 1);
    }, 500);
}

asyncMethod("A", 1, (x) => {
        asyncMethod("B", x, (x) => {
            asyncMethod("C", x, (x) => {
                asyncMethod("D", x, (x) => { });
            })
        })
    }
);

It will print the following messages one after another with 500ms interval:

1
2
3
4
A 1
B 2
C 3
D 4
A 1
B 2
C 3
D 4

The counter 1 is passed and every callback increments one. The Christmas tree code are not easy to maintain and they are simply ugly.

Using Promises

A Promise takes a function in its constructor. And the function takes two parameters: the fulfill and the reject. The fulfill is the callback when it is done and the reject is used when some error occurs.

1
2
3
4
5
6
7
8
function asyncMethod(message, counter) {
    return new Promise((fullfill, reject) => {
        setTimeout(function() {
            console.log(message + " " + counter);
            fullfill(counter + 1);
        }, 500);
    });
}
function asyncMethod(message, counter) {
    return new Promise((fullfill, reject) => {
        setTimeout(function() {
            console.log(message + " " + counter);
            fullfill(counter + 1);
        }, 500);
    });
}

Then, we can rewrite the above Christmas code, using the then() function which takes two parameters: the fulfill() and the reject().

1
2
3
4
5
6
7
8
asyncMethod("A", 1).then((x, err) => {
    asyncMethod("B", x).then((x, err) => {
        asyncMethod("C", x).then((x, err) => {
            asyncMethod("D", x).then((x, err) => {});
            })
        })
    }
);
asyncMethod("A", 1).then((x, err) => {
    asyncMethod("B", x).then((x, err) => {
        asyncMethod("C", x).then((x, err) => {
            asyncMethod("D", x).then((x, err) => {});
            })
        })
    }
);

It is just simply using the then to use the Promise, but the chain is still nested. However, we can separate the calls in its own functions. Then we can chain the Promise using then like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function A(counter) {
    return asyncMethod("A", counter);
}
 
function B(counter) {
    return asyncMethod("B", counter);
}
 
function C(counter) {
    return asyncMethod("C", counter);
}
 
function D(counter) {
    return asyncMethod("D", counter);
}
 
A(1).
  then(B).
  then(C).
  then(D);
function A(counter) {
    return asyncMethod("A", counter);
}

function B(counter) {
    return asyncMethod("B", counter);
}

function C(counter) {
    return asyncMethod("C", counter);
}

function D(counter) {
    return asyncMethod("D", counter);
}

A(1).
  then(B).
  then(C).
  then(D);

The code does now look much cleaner!

Converting Promises to Async/Await

The ES6 Javascript allows us to use a much cleaner syntax sugar: async/await. The async keyword is a function modifier that tells the Javascript that we can use the await keyword in the function to wait for some functions.

1
2
3
4
5
6
(async function test() {
    const A = await asyncMethod("A", 1);
    const B = await asyncMethod("B", A);
    const C = await asyncMethod("C", B);
    const D = await asyncMethod("D", C);
})();
(async function test() {
    const A = await asyncMethod("A", 1);
    const B = await asyncMethod("B", A);
    const C = await asyncMethod("C", B);
    const D = await asyncMethod("D", C);
})();

As the asyncMethod returns a promise, and when it is fulfilled, the counter will be incremented by one, we then can pass it (chain) into next one. The await will make sure that the function is either fulfilled or rejected before moving to next function call.

–EOF (The Ultimate Computing & Technology Blog) —

推荐阅读:
打陀螺作文400字  难忘国庆节作文500字  等底等高的圆柱与圆锥体积之和  把圆柱沿着它的直径垂直切开  现在容器内的水位至多高  求原来圆柱的体积  一个班去植树,总共植树222棵  张明一家的三个座位号分别是多少  共需油漆多少千克  求原来圆柱的表面积 
评论列表
添加评论