コールバックと非同期を解決するためのWebフロントエンドチュートリアル共有約束を使用するには、どのように良いプログラマ

良いプログラマはどのようにコールバックと非同期解決するためのWebフロントエンドチュートリアル共有約束を使用するために
まず、私たちは出力がどのようなものです以下の質問を見てみましょうか?

setTimeout(function() {
      console.log(1);
},1000)
console.log(2);

我々の結果は以下のとおりです。第一の出力2、出力1;これはそれの原因は何ですか?;それは、出力2への最初のであり、我々は、すべてのタイマーが非同期で知っておくべき
出力1、2、その後、出力にどのようにそれをその後、私たちの需要を、と?

function foo(callback) {
setTimeout(function() {
    console.log(1);
    callback();
},1000)
}
foo(function() {
      console.log(2);
})

これは、コールバックによって解決される;今、私たちはそれを印刷し、確かに1の第1出力、出力2の結果を見て
、今私はあなたが変更に必要なものだ、我々は1秒ごとに出力一度行います。

function foo(callback) {
    setTimeout(function() {
        console.log('1秒后输出');
        callback()
    }, 1000)
}
foo(function() {
    console.log('第一次输出');
    foo(function() {
        console.log('第二次输出');
        foo(function() {
            console.log('第二次输出');
        })
    })
})

これは、私たちの問題の解決策ではないでしょうか?

私たちは数回以上ある場合は、[はい、しかし、あなたはあまりにも多くのコールバックを見つけることができませんか?これは、破壊された地獄の話を皆です。

従ってES6は###地獄を破壊するために私達に解決策を提供する:プロミスと、
プロミスは、非同期方法値を処理するための方法であり、プロミスは、ネストされた問題解決することを目的とする
####約束オブジェクトはステータス:

継続的な:保留中の
成功:resovled
失敗:拒否

約束のオブジェクト:

その後成功した後に()を実行して、二つのパラメータがある場合、第一のパラメータが正常に実行され、第二のパラメータの故障後に実行は、
キャッチした後に行わ()が失敗し、
Alが全て約束([])を(。 )に成功した後に第一の方法は、次に実行する。
promise.raceを[(P1、P2、P3、...)]限り、状態を変化させることで、リードが存在するように、ステータスに対応する実行を約束

var promise = new Promise(function (resolved, rejected) {
resolved('ok'); 
rejected('no');
//如果成功和失败同时写,执行先写的;(特点状态一旦改变,就不可逆了)
});
promise.then(function(msg) {
console.log('ok:' + msg);
},function (msg) {
console.log('no:' + msg);
});

[OK]:結果を印刷、[OK]を
、今私たちが運動を行う:約束の負荷に画像を使用して、ロードが失敗した場合、画像はその失敗を示唆し、正常に体内にロードロードされます。

var promise = new Promise(function (resolved, rejected) {
var img = document.createElement('img');
img.src = './img/1.png';
img.onload = function () {
resolved(img)   //如果加载成功就返回resolved()
}
img.onerror = function () {
rejected('失败')    //如果加载成功就返回rejected()
}
})
promise.then(function (msg) {
document.body.appendChild(msg)
},function (msg) {
alert(msg)
})

どのようにあなたについての約束を知ったされていませんか?
それでは、どのよう非同期の約束、それに伴う問題を解決するには?我々は、1秒間隔出力を行い、
`` `関数fn(){
VAR =新しい新しいプロミスプロミス(関数(分解、拒否){
たsetTimeout(関数(){
にconsole.log( '毎秒')。
分解()
}、1000)
});
リターン約束;
}
のFn()を(関数(){
にconsole.log( '第一出力');
リターンのFn()
})を(関数(){
コンソール.logの( '第二出力');
リターンのFn()
})を(関数(){
にconsole.log( '第3の出力');
})

那Promise如何解决ajax回调的问题呢?咱们继续往下看.

ajaxPromise機能(URL){
VAR =新しい新しいプロミスプロミス(関数(分解、拒否){
VAR =新しい新しいXHRのXMLHttpRequest();
xhr.open( 'GET'、URL);
xhr.send();
xhr.onreadystatechange =関数( ){
IF(xhr.readyState === === 200は&& xhr.statusある4){
(xhr.responseText)分解; //テル約束成功
}
}
のsetTimeout(関数(){//要求された後5秒未満
( 'エラー')// TELL約束は失敗拒否
5000、})
})
戻り約束;
}
document.onclick =機能(){
VAR = ajaxPromiseプロ( 'data.json');
pro.then(関数(MSG) {
アラート(MSG)//パスした場合、我々はデータを取得
}、関数(MSG){
アラート(MSG)//我々が間違ったパス誤差をポップ場合
})
}

おすすめ

転載: blog.51cto.com/14573321/2456780