首页 > 其他分享 >理解es6 Promise的resolve和reject方法

理解es6 Promise的resolve和reject方法

时间:2023-01-24 06:11:06浏览次数:55  
标签:es6 resolve console 对象 thenable Promise reject

es6 Promise.resolve()方法

有时需要将现有对象转为 Promise 对象,Promise.resolve方法就起到这个作用。

 const jsPromise = Promise.resolve($.ajax('/whatever.json'));

上面代码将 jQuery 生成的deferred对象,转为一个新的 Promise 对象。

Promise.resolve等价于下面的写法。

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

Promise.resolve方法的参数分成四种情况。

(1)参数是一个 Promise 实例

如果参数是 Promise 实例,那么Promise.resolve将不做任何修改、原封不动地返回这个实例。

(2)参数是一个thenable对象

thenable对象指的是具有then方法的对象,比如下面这个对象。

let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};

Promise.resolve方法会将这个对象转为 Promise 对象,然后就立即执行thenable对象的then方法。

let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};
let p1 = Promise.resolve(thenable);
p1.then(function(value) {
  console.log(value);  // 42
});

上面代码中,thenable对象的then方法执行后,对象p1的状态就变为resolved,从而立即执行最后那个then方法指定的回调函数,输出 42。

(3)参数不是具有then方法的对象,或根本就不是对象

如果参数是一个原始值,或者是一个不具有then方法的对象,则Promise.resolve方法返回一个新的 Promise 对象,状态为resolved

const p = Promise.resolve('Hello');
p.then(function (s){
  console.log(s)
});
// Hello

上面代码生成一个新的 Promise 对象的实例p。由于字符串Hello不属于异步操作(判断方法是字符串对象不具有 then 方法),返回 Promise 实例的状态从一生成就是resolved,所以回调函数会立即执行。Promise.resolve方法的参数,会同时传给回调函数。

(4)不带有任何参数

Promise.resolve方法允许调用时不带参数,直接返回一个resolved状态的 Promise 对象。

所以,如果希望得到一个 Promise 对象,比较方便的方法就是直接调用Promise.resolve方法。

const p = Promise.resolve();
p.then(function () {
  // ...
});

上面代码的变量p就是一个 Promise 对象。

需要注意的是,立即resolve的 Promise 对象,是在本轮“事件循环”(event loop)的结束时,而不是在下一轮“事件循环”的开始时。

setTimeout(function () {
  console.log('three');
}, 0);
Promise.resolve().then(function () {
  console.log('two');
});
console.log('one');
// one
// two
// three

上面代码中,setTimeout(fn, 0)在下一轮“事件循环”开始时执行,Promise.resolve()在本轮“事件循环”结束时执行,console.log('one')则是立即执行,因此最先输出。

es6 Promise.reject()方法

Promise.reject(reason)方法也会返回一个新的 Promise 实例,该实例的状态为rejected

const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))
p.then(null, function (s) {
  console.log(s)
});
// 出错了

上面代码生成一个 Promise 对象的实例p,状态为rejected,回调函数会立即执行。

注意,Promise.reject()方法的参数,会原封不动地作为reject的理由,变成后续方法的参数。这一点与Promise.resolve方法不一致。

const thenable = {
  then(resolve, reject) {
    reject('出错了');
  }
};
Promise.reject(thenable)
.catch(e => {
  console.log(e === thenable)
})
// true

上面代码中,Promise.reject方法的参数是一个thenable对象,执行以后,后面catch方法的参数不是reject抛出的“出错了”这个字符串,而是thenable对象。

Promise状态

运行了这两段代码之后彻底理解了promise的用法;

var p = new Promise(function (resolve, reject) {
    var timer = setTimeout(function () {
        console.log('执行操作1');
        resolve('这是数据1');
    }, 1000);
});
p.then(function (data) {
    console.log(data);
    console.log('这是成功操作');
});

这里段代码放在chrome浏览器里执行,出现的第一行是Promise{<pending>},然后再出现

执行操作1
这是数据1
这是成功操作

然后再次输入p 按回车执行

打印出来p是这样

Promise{<resolved>}
然后点开看 可以看到控制台提示promiseStatus :resolved 说明promise的状态已经成为了resolved

如果去掉异步里面的resolve函数调用, 则再次打印出来的状态仍然是pending; 说明resolve函数是可以改变promise状态的一个函数;

标签:es6,resolve,console,对象,thenable,Promise,reject
From: https://www.cnblogs.com/zhaoshujie/p/17065766.html

相关文章

  • vue3学习之---webpack配置【resolve.alias修改】
    在vue3中,脚手架生成的项目里,webpack的配置文件没有了,因为公共的配置被封装到安装包里了,可以找到如下目录,同样可以修改配置文件:node_modules》@vue》cli-service   ......
  • ES6的Promise用法
    一、是什么:promise是异步编程的一种解决方案,它是一个对象,可以获取异步操作的信息,它的出现改善了异步编程,避免了地狱回调,它比传统的解决方案回调函数和事件更合理和更......
  • 关于vue报错npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency
    1---打开cmd窗口查看vue版本,出现这种情况一般都是vue版本过高,需要卸载高版本,安装低版本npm-vnode-v2.---降低npm版本,[email protected]工程路劲下删除......
  • ES6-Promise与Class类
    一。Promise作用transitionend是过渡结束事件,只要过渡结束就会触发;回调地狱: ......
  • vue.js客服系统实时聊天项目开发(七)ES6模板字符串进行字符串变量内嵌拼接
    在开发客服系统的时候进行字符串拼接的太多,可以使用模板字符串处理你可以使用ES6中的模板字符串来实现这个功能。模板字符串是用反引号(`)括起来的字符串,其中变量可以使用${......
  • ES6-新增方法
    一。字符串的includes方法:   应用:   //将网址加上后面的键值//https://www.imooc.com/course/list//https://www.imooc.com/......
  • promise-cpp应用--01简单应用
    promise-cpp是一种C++promise/A+库#include<iostream>#include<future>#include<string>#include<sstream>#include<stdexcept>#include<functional>#inclu......
  • 【ES6】正则表达式的拓展
    【ES6】正则表达式的拓展​​一、什么是正则表达式​​​​二、正则表达式常用技术介绍​​​​1)正则表达式的写法​​​​I.修饰符​​​​II.匹配模式​​​​2)正则表达......
  • 【ES6】变量的解构赋值
    【ES6】变量的解构赋值​​一、什么叫解构赋值?​​​​二、解构赋值有哪些分类?写法?​​​​1)对数组的解构赋值​​​​2)对对象的解构赋值​​​​3)对字符串的解构赋值​......
  • 【ES6】字符串的拓展
    【ES6】字符串的拓展​​一、为什么ES6要进行字符拓展?​​​​二、ASCLL码、Unicode编码、UTF-8编码的异同​​​​三、ES6新增的字符串接口​​​​1)codePointAt()​​​​......