当前位置:首页 > 编程教程 > javascript技术文章 > ES6 Promise对象的含义和基本用法分析

ES6 Promise对象含义与用法分析

  • 发布时间:
  • 作者:码农之家
  • 点击:119

这篇文章主要知识点是关于ES6、Promise、Promise对象、ES6 Promise对象概念与用法分析 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript核心技术开发解密
  • 类型:JavaScript大小:68.4 MB格式:PDF作者:阳波
立即下载

ES6 Promise对象的含义和基本用法分析

本文实例讲述了ES6 Promise对象的含义和基本用法。分享给大家供大家参考,具体如下:

1.Promise的含义

Promise是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理更强大。

所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件 (通常是一个异步操作)的结果。从语法上说,Promise是一个对象,从它可以获取异步操作的消息。

Promise对象有以下2个特点:

1.对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:Pending(进行中)Resolved(已完成)Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。

2.一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从Pending变为Resolved;从Pending变为Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对Promise对象田静回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

有了Promise对象,就可以把异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供了统一的接口,使得控制异步操作更加容易。

2.基本用法

ES6规定,Promise对象是一个构造函数,用来生成Promise实例

var promise = new Promise(function(resolve,reject){
 // ... some code
 if(/* 异步操作成功 */){
  resolve(value);
 }else{
  reject(error);
 }
});

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolvereject。它们是两个函数,又JavaScript引擎提供,不是自己部署。

resolve函数的作用,将Promise对象的状态从“未完成”变成“成功”(即从Pending变为Resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
reject函数的作用是,在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

Promise实例生成以后,可以用then方法分别制定Resolved状态和Rejected状态的回调函数:

promise.then(function(value){
 // sucess
},function(error){
 // failure
});

then方法可以接受2个回调函数作为参数,第二个函数是可选的,不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

下面是一个Promise对象的简单例子:

function timeout(ms){
 return new Promise((resolve,reject)=>{
  setTimeout(resolve,ms,'done');
 });
}
timeout(100).then((value)=>{
 console.log(value);
});

上面代码中,timeout方法返回一个Promise实例,表示一段事件以后才会发生的结果。过了指定的时间(ms参数)以后,Promise实例的状态变为Resolved,就会触发then方法绑定的回调函数。

Promise新建后就会立即执行

let promise = new Promise(function(resolve,rejeact){
 console.log('Promise');
 resolve();
});
promise.then(function(){
 console.log('Resolved');
});
console.log('Hi');
// Promise
// Hi
// Resolved

上面代码中,Promise新建后立即执行,所以首先输出的是”Promise”,然后then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行,所以”Resolved”最后输出。

下面是异步加载图片的例子:

function loadImageAsync(url){
 return new Promise(function(resolve,reject){
  var image = new Image();
  image.onload = function(){
   resolve(image);
  };
  image.onerror = function(){
   reject(new Error('Could not load image at' + url));
  };
  image.src = url;
 });
}

下面是一个用Promise对象实现Ajax操作的例子:

var getJSON = function(url){
 var promise = new Promise(function(resolve,reject){
  var client = new XMLHttpRequest();
  client.open('GET',url);
  client.onreadystatechange = handler;
  client.responseType = 'json';
  client.setRequestHeader('Accept','application/json');
  client.send();
  function handler(){
   if(this.readyState !== 4){
    return;
   }
   if(this.status === 200){
    resolve(this.response);
   }else{
    reject(new Error(this.statusText));
   }
  }
 });
 return promise;
};
//
getJSON('/posts.jons').then(function(json){
 consoloe.log(json);
},function(error){
 console.log('出错了');
});

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

ES6 Promise对象概念与用法分析

本文实例讲述了ES6 Promise对象概念与用法。分享给大家供大家参考,具体如下:

1.Promise概念

Promise 对象有三种状态:

① Fulfilled 可以理解为成功的状态
② Rejected 可以理解为失败的状态
③ Pending 既不是 Fulfilld 也不是 Rejected 的状态,可以理解为 Promise 对象实例创建时候的初始状态

2.三个重要方法

在 Promise 对象当中有三个重要方法————resolve, reject和then。

resolve 方法可以使 Promise 对象的状态改变成成功,同时传递一个参数用于后续成功后的操作,在这个例子当中就是 Hello World!字符串。

reject 方法则是将 Promise 对象的状态改变为失败,同时将错误的信息传递到后续错误处理的操作。

function printHello (ready) {
 return new Promise(function (resolve, reject) {
 if (ready) {
  resolve("Hello");
 } else {
 reject("Good bye!");
}
});
}
function printWorld () {
alert("World");
}
function printExclamation () {
alert("!");
}
printHello(true)
.then(function(message){
alert(message);
})
.then(printWorld)
.then(printExclamation); //分别弹出 Hello World !三个弹窗

上述例子通过链式调用的方式,按顺序打印出了相应的内容。then 可以使用链式调用的写法原因在于,每一次执行该方法时总是会返回一个 Promise 对象。另外,在 then onFulfilled 的函数当中的返回值,可以作为后续操作的参数,因此上面的例子也可以写成:

function printHello (ready) {
 return new Promise(function (resolve, reject) {
 if (ready) {
  resolve("Hello");
 } else {
 reject("Good bye!");
}
});
}
printHello(true).then(function (message) {
 return message;
}).then(function (message) {
 return message + ' World';
}).then(function (message) {
 return message + '!';
}).then(function (message) {
alert(message);
}); //一个弹窗 Hello World !

希望本文所述对大家ECMAScript程序设计有所帮助。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

ES6 Promise对象含义与用法 相关电子书
学习笔记
网友NO.455534

详解ES6 Promise的生命周期和创建

一:Promise的概念 Promise的中文意思是‘承诺',什么叫承诺?承诺就是现在没有发生,在将来的某个时刻一定会发生的事情。 放在编程语言的环境下,Promise就是异步事件的结果的占位符。我们不用去管异步事件的结果什么时候来,只需要关心异步事件的结果产生的时候,你想要做什么就对了。 二:Promise的生命周期 异步事件不是立即执行程序,它的结果可能要在动作发生后一段时间才到,所以它有个生命周期。例如用电饭锅煮米饭,从【米下锅开始定时】到【定时结束】,这是煮米饭的生命周期。 一个Promise的生命周期主要有2个阶段: 1: unsettled(pending) 处理过程中 - 米饭定时开始到定时结束这段期间 2: settled (fulfilled或者rejected) 处理完 - 米饭定时结束状态 我们看到settled阶段会出现两个可能的状态fulfilled或者rejected,它们分别是什么意思呢: 1: ful……

网友NO.404937

如何利用ES6进行Promise封装总结

原生Promise解析 简介 promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和强大。 promise简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果,从语法上来说,Promise是一个对象,从它可以获取异步操作的消息,Promise提供统一的API,各种异步操作都可以用同样的方法进行处理 特点 对象的状态不受外界影响,Promise对象代表一个异步操作,有三种状态:Pendding、fulfilled、rejected。只有异步操作的结果,可以决定当前是哪一种状态,其他操作都无法改变这个状态。 一旦状态改变,就不会在变,任何时候都可以得到这个结果,只有两种可能:从Pendding变为fulfilled和从Pendding变为rejected。只要这两种情况发生,状态就凝固了,会一直保持这个结果,这时就称为resolved。 利用es6进行Promise封装 处理同步任务……

网友NO.214859

浅析Javascript ES6中的原生Promise

前言 一个 Promise 对象可以理解为一次将要执行的操作(常常被用于异步操作),使用了 Promise 对象之后可以用一种链式调用的方式来组织代码,让代码更加直观。而且由于 Promise.all 这样的方法存在,可以让同时执行多个操作变得简单。 Promise的兴起,是因为异步方法调用中,往往会出现回调函数一环扣一环的情况。这种情况导致了回调金字塔问题的出现。不仅代码写起来费劲又不美观,而且问题复杂的时候,阅读代码的人也难以理解。 举例如下: db.save(data, function(data){ // do something... db.save(data1, function(data){ // do something... db.save(data2, function(data){ // do something... done(data3); // 返回数据 }) });}); 假设有一个数据库保存操作,一次请求需要在三个表中保存三次数据。那么我们的代码就跟上面的代码相似了。这时候假设在第二个 db.save 出了问题怎么办?基于这个……

网友NO.893731

ES6中的Promise代码详解

废话不多说了,直接给大家贴代码了,具体如下所示: !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" title/title/headbodyscriptvar a=0var test=function(resolve, reject){ setTimeout(function(){ a=4; console.log(a) if(a2){resolve('200 OK');} if(a2){reject('400 died');} },3000)}var p1=new Promise(test);p1.then(function(resolve){ console.log(resolve)},function(reject){ console.log(reject);})/script/body/html 总结 以上所述是小编给大家介绍的ES6中的Promise代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持! ……

网友NO.172355

ES6新特性六:promise对象实例详解

本文实例讲述了ES6新特性之promise对象。分享给大家供大家参考,具体如下: 1. promise 介绍 它是一个对象,也就是说与其他JavaScript对象的用法,没有什么两样;其次,它起到代理作用(proxy), 充当异步操作与回调函数之间的中介 。它使得异步操作具备同步操作的接口,使得程序具备正常的同步运行的流程,回调函数不必再一层层嵌套。 它的思想是,每一个异步任务立刻返回一个Promise对象,由于是立刻返回,所以可以采用同步操作的流程。这个Promises对象有一个then方法,允许指定回调函数,在异步任务完成后调用。 异步操作f1返回一个Promise对象,它的回调函数f2写法如下 (new Promise(f1)).then(f2); 2. promise 对象的三种状态 ① 异步操作未完成(pending) ② 异步操作已完成(resolved) ③ 异步操作失败(rejected) 3. 工作过程 Promise对象使用then方法添加回调函……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

投诉 / 推广 / 赞助:QQ:520161757