Promise
This feature is well established and works across many devices and browser versions. Its been available across browsers since 2015 ..
* Some parts of this feature may have varying levels of support.
Promise .
In this article
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("foo");
}, 300);
});
promise1.then((value) => {
console.log(value);
// Expected output: "foo"
});
console.log(promise1);
// Expected output: [object Promise]
new Promise(executor);
new Promise(function(resolve, reject) { ... });
- executor
-
resolvereject.executor, . (resolve) , (reject) .executor- ,resolvereject. ,executor.
Promise () , . , : ( "") .
Promise :
- (pending): , .
- (fulfilled): .
- (rejected): .
(pending), (fulfilled), (), (rejected), . , then. ( , , .. , , , DOM.)
Promise.prototype.then()Promise.prototype.catch()
![[]](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/promises.png){kind=link}
: , (settled) , .. , ( , ). (resolved) "" . fates .
Promise.length-
1 ( ).
Promise-
Promise.
Promise.all(iterable)-
.
,
iterable. , ,Promise.all. Promise.allSettled(iterable)-
( ).
, ( ), .
Promise.race(iterable)-
.
,
iterable. Promise.reject(reason)-
, -
reason. Promise.resolve(value)-
,
value.
Promise new . Promise , "" (executor function). - . (resolve) , . (reject) , , , , .
const myFirstPromise = new Promise((resolve, reject) => {
// , :
//
// resolve(someValue); //
//
// reject("failure reason"); //
});
, Promise:
function myAsyncFunction(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onload = () => resolve(xhr.responseText);
xhr.onerror = () => reject(xhr.statusText);
xhr.send();
});
}
!
let myFirstPromise = new Promise((resolve, reject) => {
// resolve(...), , reject(...), .
// setTimeout(...), .
// , , XHR, HTML5 API - .
setTimeout(function () {
resolve("Success!"); // ! !
}, 250);
});
myFirstPromise.then((successMessage) => {
// successMessage - , resolve(...) .
// , , .
console.log("! " + successMessage);
});
!
<button id="btn"> Promise!</button>
<div id="log"></div>
Promise. testPromise() <button>. , window.setTimeout, 'result' 1 3- .
p1.then. .
var promiseCount = 0;
function testPromise() {
var thisPromiseCount = ++promiseCount;
var log = document.getElementById('log');
log.insertAdjacentHTML('beforeend', thisPromiseCount +
') ( )
');
// , 'result' ( 3- )
var p1 = new Promise(
//
//
function(resolve, reject) {
log.insertAdjacentHTML('beforeend', thisPromiseCount +
') ( )
');
//
window.setTimeout(
function() {
// !
resolve(thisPromiseCount)
}, Math.random() * 2000 + 1000);
});
// ,
p1.then(
//
function(val) {
log.insertAdjacentHTML('beforeend', val +
') ( )
');
});
log.insertAdjacentHTML('beforeend', thisPromiseCount +
') ( )
');
}
if ("Promise" in window) {
btn = document.getElementById("btn");
btn.addEventListener("click", testPromise);
} else {
log = document.getElementById("log");
log.innerHTML =
"Live example not available as your browser doesn't support the Promise interface.";
}
if ("Promise" in window) {
let btn = document.getElementById("btn");
btn.addEventListener("click", testPromise);
} else {
log = document.getElementById("log");
log.innerHTML =
" , <code>Promise<code>.";
}
. , Promise. , .
XHR
Promise XMLHttpRequest MDNpromise-test GitHub. . Promise XHR.
| Specification |
|---|
| ECMAScript 2027 LanguageSpecification # sec-promise-objects |