关于javascript: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 里的提醒：
[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传(img-gClCUMmg-1660268588108)(https://upload-images.jianshu…)]

• 当 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 注册的回调函数。