当前位置:网站首页>promise详解

promise详解

2022-08-10 23:29:00 柳晓黑胡椒

promise是什么

promise 是异步编程的一种解决方案:
从语法上,promise是一个对象,从它可以获取异步操作的消息;
从功能上,promise对象是用来封装一个异步操作并可以获取其结果数据
从意义上,它是承诺,承诺过一段时间会给你一个结果;

promise的优点

解决回调导致的代码难以维护

在使用js时,为了实现某些逻辑经常会写出层层嵌套的回调函数,如果嵌套过多,会极大影响代码可读性和逻辑,这种情况也被称为回调地狱:
在这里插入图片描述

// 优化前
var sayhello = function (name, callback) {
    
  setTimeout(function () {
    
    console.log(name);
    callback();
  }, 1000);
};
sayhello("first", function () {
    
  sayhello("second", function () {
    
    sayhello("third", function () {
    
      console.log("end");
    });
  });
});
// 优化后
var sayhello = function (name) {
    
  return new Promise(function (resolve, reject) {
    
    setTimeout(function () {
    
      console.log(name);
      resolve(); //在异步操作执行完后执行 resolve() 函数
    }, 1000);
  });
};
sayhello("first")
  .then(function () {
    
    return sayhello("second"); //仍然返回一个 Promise 对象
  })
  .then(function () {
    
    return sayhello("third");
  })
  .then(function () {
    
    console.log("end");
  });

可读性

promise规范了这种异步场景的代码,相对于callback的方式,更加清晰易懂,语义化更强

可靠性

promise是原生支持的API,在各大浏览器中的运行机制是相同的,这保证了它的可靠性

信任问题

只能决议一次,决议值只能有一个,决议后无法改变;
任何then中的回调也只能被调用一次

promise的三种状态

  • pending:初始状态,既不是成功,也不是失败状态
  • fulfilled:操作成功
  • rejected:操作失败
    pending 状态的 Promise 对象可能会变为 fulfilled 状态并传递一个值给相应的状态处理方法,也可能变为失败状态 (rejected) 并传递失败信息。当其中任一种情况出现时,Promise 对象的 then 方法绑定的处理方法就会被调用

兼容性

对低版本不支持的浏览器可以使用开源的 polyfill 解决

基础使用方式

const p = new Promise((resolved, reject) => {
    
  setTimeout(function () {
    
    // resolved('成功'); //promise变为resolve成功状态
    // or
    reject("失败"); //promise变为rejected失败状态
  }, 1000);
});
p.then(
  (value) => {
    },
  (reason) => {
    
    console.log("reason", reason);
  }
);

Promise接口

prmose.prototype.then

返回一个新的Promise,

原网站

版权声明
本文为[柳晓黑胡椒]所创,转载请带上原文链接,感谢
https://blog.csdn.net/hr_beginner/article/details/126239725