Help us understand the problem. What is going on with this article?

Javascript Promiseとasync/await

More than 1 year has passed since last update.

Promiseとasync/await

Promiseとは

  • 非同期処理を統一的に扱う方法を定義したオブジェクト。
  • Promiseを使えばネストが深いコールバック嵐から解放される。

async/awaitとは

  • ES2016+から導入されたasync関数と、await演算子。
  • await/asyncを使うにはPromiseから習得する必要がある。
  • await演算子はPromiseの処理が完了するのを待機するために使うもので、async関数(async function)内でのみ有効となる。

Promiseとasync/awaitの違い

  • Promiseは、非同期の処理を上手く同期的に見せたり、並列処理が出来るメソッド。await/asyncは非同期処理を同期的に行うため直列の処理をするもの。書き方が違う。
  • Promiseを使うと、「非同期の処理」、「結果の処理」といったように処理を分けて書くことができるが、.then()メソッドの連鎖の部分は、処理が多くなると複雑になっていく。Promiseをよりシンプルに書けるようにするために、追加されることになったのが「async/await」。

async/awaitの使い方

  • awaitでPromiseの完了を待つことが出来る。そのため、awaitの後続処理を同期的に処理を記述できる。またawaitはasync functionからだけ呼ぶことが出来る。
// Promiseを作成
function testFunc(num, cb) {
    return new Promise((resolve, reject) => {
        return cb(resolve, reject, num);
    });
}

// 非同期処理
function target(resolve, reject, num) {
    return setTimeout(() => {
        try {
            if (num) {
                return resolve(num + num);
            }
            return reject('error!!!!!!');
        } catch(err) {
            return reject(err);
        }
    }, 100);
}

// 非同期処理の結果を用いた処理(async/await)
async function testAsync() {
    try {
        const a1 = await testFunc(1, target); // => 1 + 1
        const a2 = await testFunc(a1, target); // => 2 + 2
        const a3 = await testFunc(a2, target); // => 4 + 4
        return console.log(a3); // => 8
    } catch(err) {
        return console.error(`error: ${err}`);
    }
}

// async関数の実行
testAsync().catch(
    err => console.error(`error: ${err}`)
); // => 8

h1guchi
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした