JavaScript sliby

Obsah

    Zobrazit obsah

"Slibuji výsledek!"

"Vytvoření kódu" je kód, který může nějakou dobu trvat

"Spotřeba kódu" je kód, který musí čekat na výsledek

Promise je objekt JavaScriptu, který propojuje vytváření kódu a spotřebu kódu

Objekt příslibu JavaScriptu

Objekt JavaScript Promise obsahuje jak produkční kód, tak volání konzumního kódu:

Syntaxe slibu

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

Když produkční kód získá výsledek, měl by zavolat jedno ze dvou zpětných volání:

Success

myResolve(výsledná hodnota)

Error

myReject (chybový objekt)

Vlastnosti objektu Promise

Objekt JavaScript Promise může být:

  • čekající

  • Splnil

  • Odmítnuto

Objekt Promise podporuje dvě vlastnosti: state a result.

Zatímco objekt Promise "čeká" (pracuje), výsledek není definován.

Když je objekt Promise "splněn", výsledkem je hodnota.

Když je objekt Promise "odmítnut", výsledkem je chybový objekt.

"pending"

nedefinováno

"fulfilled"

výslednou hodnotu

"rejected"

chybový objekt

Nemáte přístup ke stavu a výsledku vlastností Promise.

Ke zpracování slibů musíte použít metodu Promise.

Slibte, jak na to

Zde je návod, jak používat slib:

myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

Promise.then() bere dva argumenty, zpětné volání pro úspěch a další pro selhání.

Oba jsou volitelné, takže můžete přidat zpětné volání pouze pro úspěch nebo neúspěch.

Příklad

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;

// The producing code (this may take some time)

  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});

myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;

// some code (try to change x to 5)

  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});

myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);
</script>

</body>
</html>

Příklady příslibu JavaScriptu

K demonstraci použití slibů použijeme příklady zpětného volání z předchozí kapitoly:

  • Čekání na časový limit

  • Čekání na soubor

Čekání na časový limit

Příklad použití zpětného volání

setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}
</script>

</body>
</html>

Příklad použití Promise

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
const myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function(){ myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});
</script>

</body>
</html>

Čekání na soubor

Příklad použití zpětného volání

function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(req.responseText);
    } else {
      myCallback("Error: " + req.status);
    }
  }
  req.send();
}

getFile(myDisplayer);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Callbacks</h2>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.onload = function() {
    if (req.status == 200) {
      myCallback(this.responseText);
    } else {
      myCallback("Error: " + req.status);
    }
  }
  req.open('GET', "mycar.html");
  req.send();
}

getFile(myDisplayer); 
</script>

</body>
</html>

Příklad pomocí Promise

let myPromise = new Promise(function(myResolve, myReject) {
   
  let req = new XMLHttpRequest();
   
  req.open('GET', "mycar.htm");
   
  req.onload = function() {
       
    if (req.status == 200) {
           
      myResolve(req.response);
       
    } else {
           
      myReject("File not Found");
       
    }
  };
  req.send();
});

myPromise.then(
   
  function(value) {myDisplayer(value);},
   
  function(error) {myDisplayer(error);}
);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

let myPromise = new Promise(function(myResolve, myReject) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myResolve(req.response);
    } else {
      myReject("File not Found");
    }
  };
  req.send();
});

myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);
</script>

</body>
</html>

Podpora prohlížeče

ECMAScript 2015, také známý jako ES6, představil objekt JavaScript Promise.

Následující tabulka definuje první verzi prohlížeče s plnou podporou objektů Promise:

Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
Feb, 2014 Jul, 2015 Apr, 2014 Sep, 2014 Mar, 2014