コード例を通して Promise を理解しましょう-jsチュートリアル-php.cn

コード例を通して Promise を理解しましょう

青灯夜游

リリース： 2023-03-01 20:08:26

転載

1802 人が閲覧しました

この記事では、Promise の基本的な使用法を理解し、Promise の非同期アクセスの概念をさらに習得するのに役立つ複数のコード例を使用します。

コード例を通して Promise を理解しましょう

プロミスの評判は以前から聞いていましたが、もっと奥深いものだと感じていて、少し怖くてなかなか踏み出せませんでした。それを理解します。最近Station BのLi Lichao氏がアップロードしたNode.jsのビデオを見ました。説明が非常に分かりやすかったので、ここでさらに整理してみます。

最初に問題を見てみましょう

JavaScript が単一スレッドで実行されることは誰もが知っているので、データの取得に時間がかかる状況に遭遇した場合は、これはブロッキングを引き起こし、後続のコードが実行できなくなるため、非常に致命的です。たとえば、次のコード

function sum(a, b) {
    const begin = Date.now();
    while(Date.now() - begin < 10000) {

    }
    return a+b;
}

console.log(sum(1,2));
console.log("1");

ログイン後にコピー

の途中にある while ステートメントは 10 秒のループを経て、最終的に出力されます。それぞれ 3 と 1

ただし、10 秒後に 3 を出力できるようにしたいのですが、1 は最初に出力する必要があります

##ここでは

setTimeout## を使用します# そして、次のようにコードを変更します<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">function sum(a, b) { setTimeout(() => { return a+b; },10000) } console.log(sum(1,2)); console.log("1");</pre><div class="contentsignin">ログイン後にコピー</div></div>実行すると、1 は確かに即座に出力されますが、3 が出力される位置は未定義であることがわかります

コード例を通して Promise を理解しましょう理由は、このときの

console.log

待ち時間もありません setTimeout終了後、10秒後のデータを受信できないためです 10 秒後にデータを受信するには、コールバック関数を使用できます

function sum(a, b, callback) {

    setTimeout(() =>{
        callback(a+b);
    }, 10000)

}

sum(1,2,(result) => {
    console.log(result);
});
console.log("1");

ログイン後にコピー

b をパラメータとして受け取ることができるコールバック関数に渡されます

(result) => {console.log(result); }

#したがって、10 秒後にこのコールバック関数が実行され、出力されます。結果は次のとおりです。

##このようにして、次のようになります。この問題は当初解決されており、遅延して取得する必要があるデータは先に実行されてから取得されます。コード例を通して Promise を理解しましょう

しかし、Promise はまだ登場しておらず、これには改善が必要な別の領域が関係しています。

コールバック地獄

これは一見すると非常にハッタリのように聞こえます。これは実際には、コールバック関数の複数の層の入れ子によって引き起こされる状況であり、読み取りやデバッグには役立ちません。

たとえば、今回はこの sum 関数を複数回呼び出したいので、1 2 の結果を取得した後、1 2 3 と 1 2 3 4 の結果を取得する必要があります。 ##したがって、sum によって渡されるコールバック関数では、次のように sum がネストのために複数回呼び出されます。

sum(1,2,(result) => {
    sum(result, 3, (result) => {
        sum(result, 4, (result) => {
            console.log(result);
        })
    })
});

ログイン後にコピー

このピラミッド状の構造は読みにくく、デバッグが難しく、コールバック地獄と呼ばれます。

ということで、いよいよ Promise の登場です。その登場により、コールバック地獄の問題は解決されました。コード例を通して Promise を理解しましょう

Promise とは

Promise を使用してコールバック地獄の問題を解決する前に、まず Promise とは何かについて一般的に理解しましょう。

私の現在の判断では、Promise は非同期データにアクセスするために使用されるオブジェクトです。

最初に、空の Promise が出力されたときにどのように見えるかを見てみましょう

const promise = new Promise(()=>{});

ログイン後にコピー

これらの中で最も重要なのは 2 つの値です。 PromiseState と PromiseResult (後で詳しく説明します) ですが、ここでは Promise にこれら 2 つのプロパティがあることだけを知っておく必要があります。

プロミスにデータを保存するプロセスを見てみましょう。最も重要なことは、解決と拒否があることを知っておくことです。たとえば、次のコードコード例を通して Promise を理解しましょう

const promise = new Promise((resolve, reject) => {
    const flag = true;
    if (flag) {
        resolve("resolve datas");
    } else {
        reject("reject data");
    }
})

ログイン後にコピー

現時点では、フラグが true なので、resolve の storage を実行すると、得られる結果は次のようになります。

#そして、フラグを false に変更して、reject の storage を実行すると、得られた結果は次のとおりです

コード例を通して Promise を理解しましょう

ここで上記 2 つのプロパティについて説明します。

コード例を通して Promise を理解しましょう Promise にデータが格納されていない場合、の値はPromiseState が保留中であり、PromiseResult の値が未定義です

Promise の場合リゾルブを使用してデータを保存する場合、PromiseState の値は保留中であり、PromiseResult の値は対応する保存された値です

2 つのタイプがあるため、読み取りは必然的に 2 つのタイプに分けられます
Promise 内のデータを読み取るときは、次の構造を使用する必要があります

promise.then(result => {
    console.log(result);
}, reason => {
    console.log(reason);
})

ログイン後にコピー

If データがresolveに存在する場合はresultが結果を返し、rejectに存在する場合はreasonが結果を返します。

Promise を使用してコールバック地獄を解決する

Promise について予備的に理解すると、現在 Promise で実行できることはコールバック関数を使用しても実行できることがわかります。

したがって、最も重要なことは、Promise がコールバック地獄を解決するということです。たとえば、前の問題は次の形式で書くことができます

function sum(a, b) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(a+b);
        }, 1000);
    })
}

sum(1,2)
    .then(result => sum(result,3))
    .then(result => sum(result,4))
    .then(result => {
        console.log(result);
    })

ログイン後にコピー

promise 通过then方法进行读取后，是个新的Promise对象，比如我们可以打印一下

function sum(a, b) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(a+b);
        }, 1000);
    })
}

console.log(sum(1,2)
    .then(result => sum(result,3)))

ログイン後にコピー

コード例を通して Promise を理解しましょう