JavaScript ígéretek

Tartalomjegyzék

Tartalomjegyzék megjelenítése

"Eredményt ígérek!"

A „kód előállítása” olyan kód, amely eltarthat egy ideig

A „Kódfelhasználás” olyan kód, amelynek meg kell várnia az eredményt

Az ígéret egy JavaScript objektum, amely összekapcsolja a kód előállítását és a kódfelhasználást

JavaScript Promise Object

A JavaScript Promise objektum tartalmazza az előállító kódot és a fogyasztó kód hívásait is:

Promise Syntax

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 */ }
);

Amikor az előállító kód megkapja az eredményt, meg kell hívnia a két visszahívás egyikét:

Success: myResolve(eredményérték)
Error: myReject (hibaobjektum)

Ígérje meg az objektum tulajdonságait

A JavaScript Promise objektum lehet:

Függőben levő
Teljesült
Elutasítva

Az Promise objektum két tulajdonságot támogat: state és result.

Amíg egy Promise objektum "függőben van" (működik), az eredmény nincs meghatározva.

Ha egy Promise objektum „teljesül”, az eredmény egy érték.

Ha egy Promise objektumot "elutasítanak", az eredmény egy hibaobjektum.

"pending": határozatlan
"fulfilled": eredményérték
"rejected": hibaobjektum

Nem férhet hozzá az ígéret tulajdonságaihoz: állapot és eredmény.

Az ígéretek kezeléséhez Promise metódust kell használnia.

Ígérd meg, hogyan

Íme, hogyan kell használni az ígéretet:

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

A Promise.then() két érvet használ: egy visszahívást a sikerhez és egy másikat a kudarchoz.

Mindkettő nem kötelező, így csak siker vagy kudarc esetén adhat hozzá visszahívást.

Példa

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);}
);

Próbálja ki Ön is →

<!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>

JavaScript ígéret példák

Az ígéretek használatának bemutatására az előző fejezet visszahívási példáit használjuk:

Várakozás az időtúllépésre
Fájlra vár

Várakozás az időtúllépésre

Példa visszahívás használatára

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

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

Próbálja ki Ön is →

<!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élda az ígéret használatára

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

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

Próbálja ki Ön is →

<!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>

Fájlra vár

Példa a visszahívás használatára

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);

Próbálja ki Ön is →

<!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élda a Promise használatára

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);}
);

Próbálja ki Ön is →

<!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>

Böngésző támogatás

Az ECMAScript 2015, más néven ES6, bevezette a JavaScript Promise objektumot.

Az alábbi táblázat az első böngészőverziót határozza meg, amely teljes mértékben támogatja az Promise objektumokat:


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