ホームページ  >  記事  >  ウェブフロントエンド  >  Promise オブジェクトの簡単な使用法

Promise オブジェクトの簡単な使用法

一个新手
一个新手オリジナル
2017-09-23 10:41:541978ブラウズ

Promise オブジェクトは、非同期コールバックを解決するために es6 で提案されたソリューションです。初心者として、私は最近このことを理解しました。私は専門家からのアドバイスを期待しながらこの記事を書いていますが、同時に、Promise を理解していない初心者の友人にも役立つと思います。

これ以上ナンセンスではありません。理解できない場合は、自分で検索してください。この記事は、いくつかの約束を見た友人がいると思います。しかし、私はそれらにもっと精通していると思います(以前にこれを理解していなかったとき、それは非常に高級なものだと思っていたので)例を見た後、それを新たに理解できるようになります。次に、私が書いた簡単な ajax リクエストを直接添付します。

function get(url) {
        return new Promise((resolve, reject) => {
            var ajax = new XMLHttpRequest();
            ajax.open('GET', url);
            ajax.onreadystatechange = function() {
                if (ajax.readyState == 4) { 
                    if(ajax.status == 200){
                        resolve(ajax);
                    }else{
                        alert(2);
                        reject();
                    }   
                }
            }
            ajax.send();
        });
    }

    document.getElementById('btn').onclick = function() {
        get('b.json').then(function(res) {
            
            console.log(res.responseText);
            document.getElementById('p1').innerHTML = res.responseText;
        });
    }


es6 オブジェクトが導入されているため、この記事ではいくつかの es6 構文を使用しています。理解できない学生は、自分で Baidu を使用できます。 、解決と拒否、私の個人的な理解は成功と失敗です(私の理解が間違っている場合は、誰かが私を修正してくれることを願っています、結局のところ、私はそれを学んだばかりです)、ajaxの手順についてはこれ以上詳しく説明しません。 get 関数を直接使用します。Promise オブジェクトが内部で返され、ajax メソッドがこの Promise オブジェクトにアタッチされます。最終的に、ajax リクエストは成功します。このとき、resolve が役に立ちます。resolve(ajax); 失敗したら、直接 (リクエストの失敗と同じです)reject() してください。

最後に、この単純な Promise ケースが完成しました。自分の環境でテストできます。

以上がPromise オブジェクトの簡単な使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。