ES6---Promise对象

这篇具有很好参考价值的文章主要介绍了ES6---Promise对象。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端的一个必学知识之一,Promise对象,是一种用来解决异步编程的方案

特点:
1.对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。
只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
 
2.一旦状态改变,就不会再变。任何时候都可以得到这个结果。
状态改变只有两种可能:从pending变为fulfilled和从pending变为rejected。
只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,称为:定型(resolved)
 
3.缺点:无法取消,一旦创建便立即执行;必须设置回调函数,否则promise内部会报错,但是不反应到外部来;处于pending状态无法知道当前异步操作处于刚开始状态还是即将完成的状态。
 
4.基本用法
const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});//then的第二个参数为可选

举几个例子

function timeout(ms) {
  return new Promise((resolve, reject) => {
      //setTImeout的第三个参数,作为resolve函数的参数
    setTimeout(resolve, ms, 'done');
  });
}

//调用函数,值100为setTImeout的时间,若异步状态为fulfilled则返回传递给resolve的值
timeout(100).then((value) => {
  console.log(value);
});

 

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

/*原因:
*promise在创建后便会立即执行,因此首先打印Promise
*then返回返回异步回调函数,所以执行放在后面,因此Hi提前到第二个执行
*/

 

5.Promise.prototype.then(),
当promise对象返回状态为resolved时,则会调用then的回调函数
a.其返回的是一个新的promise对象
b.可用链式写法书写,
c.一个promise后面可以跟n个then回调函数
getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // ...
});
/*
*上面的代码使用then方法,依次指定了两个回调函数。
*第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。
*/
 
6.Promise.prototype.catch()
当promise对象返回的状态为rejected时,则会调用catch回调函数
a.特点同then函数相同,链式编程,返回值为promise,可以跟进多个catch回调函数
const promise = new Promise(function(resolve, reject) {
  throw new Error('test');//抛出一个错误,即状态转为reject
});
promise.catch(function(error) {
  console.log(error);// Error: test
});

 

const promise = new Promise(function(resolve, reject) {
  . . .
}).then(function(){. . .})
.then(function(){. . .})
.catch(function(error){//处理前面promise对象以及回调的两个then函数的错误});

 几个注意的点,

a.catch函数返回为promise对象,所以后面也可以跟进then函数,但前面的catch函数不会捕获后面的then函数的错误

const promise = new Promise(function(resolve, reject) { . . . })
.catch(function(error){//处理前面promise对象的错误})
.then(function(){...});//这里的then函数的错误不会被catch捕获,

 因此一般将catch函数写在所以then函数的后面,方便捕获整个promise及then函数的错误

b.catch函数也可以抛出错误,但catch函数抛出的错误只能由后一个catch函数捕获

const promise = new Promise(function(resolve, reject) { . . . })
.catch(function(error){throw new Error('test');})//catch抛出一个错误
.catch(function(){...});//这里的catch函数可以捕获前面promise的错误以及catch的错误

 

7.promise.all()

用来将多个promise对象包装成一个promise对象

const p = Promise.all([p1, p2, p3]);
 
----未完待续---
备注:以上学习参考至https://es6.ruanyifeng.com/#docs/promise#
 

 文章来源地址https://www.toymoban.com/news/detail-711250.html

 
 

到了这里,关于ES6---Promise对象的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ES6基础知识三:对象新增了哪些扩展?

    一、属性的简写 ES6中,当对象键名与对应值名相等的时候,可以进行简写 方法也能够进行简写 在函数内作为返回值,也会变得方便很多 注意:简写的对象方法不能用作构造函数,否则会报错 二、属性名表达式 ES6 允许字面量定义对象时,将表达式放在括号内 表达式还可以

    2024年02月15日
    浏览(30)
  • ES6-10:Promise

    前端开发因为网络交互的存在,产生了一种最常见的独特场景——异步,即程序执行的过程并非完全按照代码的书写顺序执行。异步编程的解决方法有①回调函数、②事件、③Promise、④观察者对象; Promise是ES6提供的一种异步编程的一种解决方案。简单来书就是一个容器,里

    2024年02月08日
    浏览(33)
  • ES6 - promise(1)

    今天决定对之前学过的一些前端的知识进行梳理和总结,因为最近都是独自承担项目的开发与搭建,所以先从前后端交互的第一线axios来梳理,复习axios首先一定要先复习promise对象。 promise对象是ES6新引入的一个解决异步编程的方案。首先我们要知道前端比较常见的两种异步编

    2024年02月08日
    浏览(30)
  • ES6 Promise 详解

    目录 一、Promise基本介绍 二、Promise实现多次请求         1.传统Ajax方式实现多次请求 :              1.1 json数据准备             1.2 JQuery操作Ajax         2.使用ES6新特性Promise方式 :  三、Promise代码重排优化         1.问题分析 :          2.代码优化 :              2

    2024年02月08日
    浏览(28)
  • 【ES6】Promise.all用法

    Promise.all()方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。 上面代码中,Promise.all()方法接受一个数组作为参数,p1、p2、p3都是 Promise 实例,如果不是,就会先调用下面讲到的Promise.resolve方法,将参数转为 Promise 实例,再进一步处理。另外,Promise.all()方法的参数可以

    2024年02月09日
    浏览(27)
  • 【ES6】Promise.allSettled的用法

    Promise.allSettled() 是一个Promise方法,用于处理一个Promise数组,返回一个新的Promise数组,每个元素对应原始Promise的状态。这个方法可以用于处理多个异步操作,并且能够获取每个操作的结果和状态。 下面是Promise.allSettled()的详细代码示例: 输出结果: 在上面的代码中,我们创

    2024年02月10日
    浏览(31)
  • 【ES6】Promise.race的用法

    Promise.race()方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。 上面代码中,只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。 Promise.race()方法的参数与Promise.all()方法一样,如果不是 Pr

    2024年02月10日
    浏览(27)
  • 【ES6】fetch函数和Promise

    fetch函数是现代JavaScript中用于发起HTTP请求的一个非常强大的工具。它返回一个Promise,这个Promise在请求成功时解析为Response对象,或者在请求失败时拒绝。 以下是一个基本的fetch使用示例: 在这个例子中,我们首先向https://api.example.com/data发起一个GET请求。然后,我们检查响应

    2024年02月09日
    浏览(26)
  • ES6 Promise/Async/Await使用

    Promise应用 在工作中, 我们经常会遇到用异步请求数据, 查询一个结果, 然后把返回的参数放入到下一个执行的异步函数像这样: 当我们使用Promise后, 我们的程序就变成了这样: 控制台输出如下: async/await应用 看是不是简洁很多了, 如果你不想使用这种链式调用, 也可以结合async/

    2024年02月12日
    浏览(32)
  • 你是怎么理解ES6中 Promise的?使用场景?

    Promise ,译为承诺,是异步编程的一种解决方案,比传统的解决方案(回调函数)更加合理和更加强大 在以往我们如果处理多层异步操作,我们往往会像下面那样编写我们的代码 阅读上面代码,是不是很难受,上述形成了经典的回调地狱 现在通过 Promise 的改写上面的代码 瞬

    2024年03月15日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包