JavaScript中 Promise 的使用技巧

 更新时间:2022年08月15日 16:16:11   作者:JerryWang_sap  
这篇文章主要介绍了JavaScript中 Promise 的使用技巧,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下

“生产代码”是可能需要一些时间来执行的代码。

“消费代码”是必须等待结果的代码。

Promise 是一个 JavaScript 对象,它链接生产代码和消费代码。

看一段最简单的代码:

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

执行 new Promise 的构造函数后,会立即进入 Promise 的构造函数体内,即包含了 resolve 和 reject 方法的匿名函数。

然后执行完毕。此时并不会执行 then 里的回调函数。

然后 then 指定的回调函数被异步调用,注意 Chrome 里的提示:

  • 当 Promise 对象处于 pending(工作)状态时,结果是未定义的。
  • 当 Promise 对象 fulfilled 时,结果是一个值。如下图所示:

  • 当 Promise 对象被 rejected 时,结果是一个错误对象。

开发人员无法访问 Promise 属性状态和结果,必须使用 Promise 方法来处理 Promise。

看一个包含 UI 的例子:

Promise 把异步代码封装起来。上图的 setTimeout,模拟了一个耗时 3 秒的 HTTP 操作。

返回的 myPromise 对象,使用 then 注册回调函数。回调函数不关心自己什么时候被调用。

运行显示:

3 秒后:

一个文件访问的例子:

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

函数体内一般是一个比较费时的操作,操作本身会立即执行,但什么时候执行结束?这就是一个异步操作了。执行结束后,通过 resolve 通知 then 注册的回调函数。

到此这篇关于JavaScript  Promise 的使用技巧的文章就介绍到这了,更多相关JavaScript Promise 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript 使用for循环时该注意的问题-附问题总结

    javascript 使用for循环时该注意的问题-附问题总结

    所谓for循环就是重复的执行一段代码,for循环也是希望在创建循环时常会用到的工具,这篇内容主要给大家介绍javascript 使用for循环时该注意的问题-附问题总结,需要的朋友可以参考下
    2015-08-08
  • firefox中用javascript实现鼠标位置的定位

    firefox中用javascript实现鼠标位置的定位

    firefox中用javascript实现鼠标位置的定位...
    2007-06-06
  • js提取中文拼音首字母的封装工具类

    js提取中文拼音首字母的封装工具类

    这篇文章主要给大家介绍了关于利用js实现的一个提取中文拼音首字母的封装工具类,文中给出了详细完整的示例代码,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以直接拿来用,下面随着小编来一起学习学习吧。
    2018-03-03
  • js下利用userData实现客户端保存表单数据

    js下利用userData实现客户端保存表单数据

    对于多数网页制作的朋友,实现在客户端保存在网页表单上的信息,比较多的是采用Cookie技术来实现,这些功能例如:下拉列表框选择的选项,文本框输入的数据等。
    2010-06-06
  • js动态给table添加/删除tr的方法

    js动态给table添加/删除tr的方法

    这篇文章介绍了js动态给table添加/删除tr的方法,有需要的朋友可以参考一下
    2013-08-08
  • ibm官方资料把应用程序从 Internet Explorer 迁移到 Mozilla

    ibm官方资料把应用程序从 Internet Explorer 迁移到 Mozilla

    使特定于 Internet Explorer 的 Web 应用程序在 Mozilla 上运行时,您遇到过麻烦吗?本文讨论了将应用程序迁移到基于开源 Mozilla 浏览器上时的常见问题。首先讨论跨浏览器开发的基本技术,然后介绍克服 Mozilla 和 Internet Explorer 之间差异的策略。
    2008-04-04
  • js Clip奇思妙想之多彩渐变字效果

    js Clip奇思妙想之多彩渐变字效果

    本篇我们用同样的原理,把文字用CLIP属性分的更细,分别着色,然后组合到一起,实现自左到右更精确的色彩渐变。问题是文字细化分割需要用到很多很多个元素,所以这里我们要用程序来控制,自动生成这些元素。
    2008-11-11
  • JavaScript中使用Object.prototype.toString判断是否为数组

    JavaScript中使用Object.prototype.toString判断是否为数组

    这篇文章主要介绍了JavaScript中使用Object.prototype.toString判断是否是数组,本文讲解了Object.prototype.toString相关知识,并给出了判断数组的实现代码,使用本文方法同样可以判断javascrpty的其它数据类型,需要的朋友可以参考下
    2015-04-04
  • JavaScript获取Excel表格的列序号和列名

    JavaScript获取Excel表格的列序号和列名

    这篇文章主要介绍了JavaScript获取Excel表格的列序号和列名,在处理Excel文件时,通常要获取xx列的数据,这就要求先找到列序号,下文关于列名获取需要的小伙伴可以参考一下
    2022-05-05
  • js 去掉空格实例 Trim() LTrim() RTrim()

    js 去掉空格实例 Trim() LTrim() RTrim()

    js 去掉空格实例Trim(),LTrim(),RTrim() 需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01

最新评论