翼度科技»论坛 编程开发 JavaScript 查看内容

前端多线程处理 —— Promise对象

5

主题

5

帖子

15

积分

新手上路

Rank: 1

积分
15
在前端编程中,处理一些简短、快速的操作,在主线程中就可以完成。
但是,在处理一些耗时比较长以至于比较明显的事情,比如读取一个大文件或者发出一个网络请求,就需要子线程来完成,以避免只用单线程时造成页面一时无法响应的事情。
以发送网络请求为例,在以往的JavaScript中,使用多个回调函数来处理请求返回的多个状态,如下面的代码:
  1. var xhr = new XMLHttpRequest();
  2. xhr.onload = function () {                                              // 请求成功时调用
  3.     document.getElementById("box1").innerHTML=xhr.responseText;
  4. }
  5. xhr.onerror = function () {                                             // 请求失败时调用
  6.     document.getElementById("box1").innerHTML="请求出错";
  7. }
  8. xhr.open("GET", "./book1/chapt1.php", true);
  9. xhr.send();
复制代码
 如果该请求因为网络延迟等原因没有回应,页面就会卡在该位置而不会执行下面的代码,造成页面展示不佳的问题。
而使用 Promise 对象就不会有这个问题。如下面的代码:
  1. function ajax(URL) {
  2.     return new Promise(function (resolve, reject) {
  3.         var xhr = new XMLHttpRequest();
  4.         req.onload = function () {
  5.             if (req.status === 200) {
  6.                     resolve(req.responseText);
  7.                 } else {
  8.                     reject(new Error(req.statusText));
  9.                 }
  10.             };
  11.         req.onerror = function () {
  12.             reject(new Error(req.statusText));
  13.         };
  14.         
  15.         req.open('GET', URL, true);
  16.         req.send();
  17.     });
  18. }
  19. var URL = "./book1/chapt1.php";
  20. ajax(URL).then((value) => {                                         
  21.     document.getElementById("box1") = value;                       // 请求成功
  22. }).catch((error) => {
  23.     document.getElementById("box1") = error;                       // 请求失败
  24. });
复制代码
这样看,Promise虽然解决了问题,但看起来更加复杂了,代码也更多了,但是在接下来的例子中,你会看到Promise使代码更优雅的应用。
例如有这样一个“函数瀑布”实现的功能:
  1. setTimeout(function () {
  2.     console.log("First");
  3.     setTimeout(function () {
  4.         console.log("Second");
  5.         setTimeout(function () {
  6.             console.log("Third");
  7.             setTimeout(function () {
  8.                 console.log("Fourth");
  9.             }, 2000);
  10.         }, 1000);
  11.     }, 2000);
  12. }, 1000);
复制代码
 可以想象,在一个复杂的程序中,这样的函数无论是维护还是异常处理都是一件特别繁琐的事情,而且会让缩进格式变得非常冗赘。
 
现在使用Promise来实现就有条理和优雅的多:
  1. function print(delay, message) {
  2.     return new Promise(function (resolve, reject) {
  3.         setTimeout(function () {
  4.             console.log(message);
  5.             resolve();
  6.         }, delay);
  7.     });
  8. }
  9. print(1000, "First").then(function () {
  10.     return print(2000, "Second");
  11. }).then(function () {
  12.     return print(1000, "Third");
  13. }).then(function () {
  14.     print(2000, "fourd");
  15. });
复制代码
 

来源:https://www.cnblogs.com/wuxxblog/p/17790732.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

举报 回复 使用道具