首页 > JS > JavaScript基础

JavaScript Promise 对象

JavaScript基础 2022-04-25 01:50:50小码哥的IT人生shichen

JavaScript Promise

"I Promise a Result!"

"Producing code（生产代码）" 是需要一些时间的代码

"Consuming code（消费代码）" 是必须等待结果的代码

Promise 是一个 JavaScript 对象，它链接生成代码和消费代码

JavaScript Promise 对象

JavaScript Promise 对象包含生产代码和对消费代码的调用：

Promise 语法

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code"（可能需要一些时间）
  myResolve(); // 成功时
  myReject();  // 出错时
});
// "Consuming Code" （必须等待一个兑现的承诺）
myPromise.then(
  function(value) { /* 成功时的代码 */ },
  function(error) { /* 出错时的代码 */ }
);

当执行代码获得结果时，它应该调用两个回调之一：

结果	调用
成功	myResolve(result value)
出错	myReject(error object)

Promise 对象属性

JavaScript Promise 对象可以是：

Pending
Fulfilled
Rejected

Promise 对象支持两个属性：state 和 result。

当 Promise 对象 "pending"（工作）时，结果是 undefined。

当 Promise 对象 "fulfilled" 时，结果是一个值。

当一个 Promise 对象是 "rejected" 时，结果是一个错误对象。

myPromise.state	myPromise.result
"pending"	undefined
"fulfilled"	结果值
"rejected"	error 对象

您无法访问 Promise 属性 state 和 result。

您必须使用 Promise 方法来处理 Promise。

如何使用 Promise

以下是使用 Promise 的方法：

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

Promise.then() 有两个参数，一个是成功时的回调，另一个是失败时的回调。

两者都是可选的，因此您可以为成功或失败添加回调。

示例代码：

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;
// 生成代码（这可能需要一些时间）
  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Promise</h1>
<p id="demo"></p>
<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;
// 一些代码（请尝试将 x 改为 5）
  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);
</script>
</body>
</html>

运行结果：

Javascript Promise

OK

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

JavaScript Promise 实例

为了演示 Promise 的使用，我们将使用上一章中的回调实例：

等待超时
等待文件

等待超时

使用回调的例子

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript SetTimeout()</h1>
<p>等待 3 秒（3000 毫秒）让此页面发生变化。</p>
<h1 id="demo"></h1>
<script>
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}
</script>
</body>
</html>

运行结果：

Javascript SetTimeout()

等待 3 秒（3000 毫秒）让此页面发生变化。

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

使用 Promise 的例子

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Promise</h1>
<p>等待 3 秒（3000 毫秒）让此页面发生变化。</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>

运行结果：

Javascript Promise

等待 3 秒（3000 毫秒）让此页面发生变化。

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

等待文件

使用回调的例子

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

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 回调</h1>
<p id="demo"></p>
<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "/demo/js/mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(this.responseText);
    } else {
      myCallback("Error: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer); 
</script>
</body>
</html>

运行结果：

Javascript 回调




汽车，现指自动车（英式英语：car；美式英语：automobile；美国口语：auto），即本身具有动力得以驱动前进，不须依轨道或电缆，得以动力行驶之车辆。广义来说，具有两轮或以上以原动机驱动之车辆，便可称其为汽车；狭义来说，仅指三或四轮以上，以热机驱动之车辆为汽车（亦是生活中所说之汽车）。第一辆全尺寸汽车由尼古拉·约瑟夫·居纽制造出来。而德国工程师卡尔·本茨则被为现代化汽车之父。本茨制造了三轮汽车以后，戈特利布·戴姆勒首先制造四轮汽车，美国人亨利·福特首先大量生产平价汽车，是使汽车得以普及化的人。

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Promise</h1>
<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', "/demo/js/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>

运行结果：

Javascript Promise




汽车，现指自动车（英式英语：car；美式英语：automobile；美国口语：auto），即本身具有动力得以驱动前进，不须依轨道或电缆，得以动力行驶之车辆。广义来说，具有两轮或以上以原动机驱动之车辆，便可称其为汽车；狭义来说，仅指三或四轮以上，以热机驱动之车辆为汽车（亦是生活中所说之汽车）。第一辆全尺寸汽车由尼古拉·约瑟夫·居纽制造出来。而德国工程师卡尔·本茨则被为现代化汽车之父。本茨制造了三轮汽车以后，戈特利布·戴姆勒首先制造四轮汽车，美国人亨利·福特首先大量生产平价汽车，是使汽车得以普及化的人。

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

浏览器支持

ECMAScript 2015，也称为 ES6，引入了 JavaScript Promise 对象。

下表注明了首个完全支持 Promise 对象的浏览器版本：

Chrome	IE	Firefox	Safari	Opera
Chrome 33	Edge 12	Firefox 29	Safari 7.1	Opera 20
2014 年 2 月	2015 年 7 月	2014 年 4 月	2014 年 9 月	2014 年 3 月

上一篇异步的 JavaScript下一篇JavaScript Async

小码哥的IT人生

JavaScript Promise 对象

JavaScript Promise

JavaScript Promise 对象

Promise 语法

Promise 对象属性

如何使用 Promise

示例代码：

完整实例：

JavaScript Promise 实例

等待超时

使用回调的例子

完整实例：

使用 Promise 的例子

完整实例：

等待文件

使用回调的例子

完整实例：

使用 Promise 的例子

完整实例：

浏览器支持

tags标签云

JS栏目导航

最新文章

热门文章

JavaScript Promise 对象

JavaScript Promise

JavaScript Promise 对象

Promise 语法

Promise 对象属性

如何使用 Promise

示例代码：

完整实例：

JavaScript Promise 实例

等待超时

使用回调的例子

完整实例：

使用 Promise 的例子

完整实例：

等待文件

使用回调的例子

完整实例：

使用 Promise 的例子

完整实例：

浏览器支持

相关阅读

tags标签云

JS栏目导航

最新文章

热门文章