Promise 的定义

Pormise是JS的异步编程的一种解决方案,在ES6将其写进了语言标准,提供了原生的Promise对象。

Promise简单来理解就是一个容器,里面存放着某个未来才会结束的事件结果。Promise是一个对象,从它可以获取异步操作的消息,Promise提供了统一的API,各种异步操作都可以用同样的方法进行处理。

Promise有下面两个特点:

  1. 对象的状态不受外界影响。有三种状态:padding(进行中)、fulfilled(成功)、rejected(失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。

  2. 一旦状态改变,就不会再变,任何时候都可以得到这个结果。三个状态只有从padding到fulfilled或者从padding到rejected。状态只有从padding改变到fulfilled或者refected,两种改变。

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

Promise存在的缺点

  1. 无法取消Promise,一旦新建它就会立即执行,无法中途取消。

  2. 如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。

  3. 当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

Promise基本用法

const promise = new Promise((resolve, reject) => {
let status = true;
if (status) {
resolve('操作成功!');
} else {
reject('操作失败!');
}
}); promise.then(res => {
console.log('成功结果:' + res);
}, error => {
console.log('失败结果:' + error); });

ES6中,Promise对象是一个构造函数,用来生成Promise实例。Promise构造函数接受一个函数作为参数,接受两个参数,分别是resolve和reject两个函数。

其中,resolve函数作用是将Promise的状态从padding改变成fufilled;而reject函数作用是将Promise的状态从padding改变成rejected。

在Promise实例生产后,可以用then方法分别指定了fufilled状态和rejected状态的回调函数。

其中then方法接受两个参数,第一个回调函数是状态改变fufilled时调用的,第二个回调函数是状态改变refected时调用的。第二个参数是可选的,不一定要提供。

const promise = new Promise((resolve, reject) => {
console.log('new Promise()');
resolve();
}); promise.then(() => {
console.log('resolve()');
}); console.log('End');

上面是一个Promise对的简单写法,我们看下上面的例子是如何输出的。

// 执行结果
new Promise()
End
resolve()

在上面的例子中因为Promise对象是同步的所以先输出,then方法是异步的所以后输出。

Promise的语法糖then

Promise实例具有then方法,then方法是定义在原型对象Promise.prototype上的。它的作用前面说过,第一个回调函数是状态改变fufilled时调用的,第二个回调函数(可选)是状态改变rejected时调用的。

new Promise((resolve, reject) => {
resolve('王小端Coder');
}).then(res => {
console.log(res); // 王小端Coder
});

then方法的基础调用写法,可以写一个回调方法,来执行成功后的回调。then方法返回一个的是一个新的Promise实例,因此我们可以采用链式写法,即then方法后面再调用一个then方法。

new Promise((resolve, reject) => {
resolve('王小端Coder');
}).then(res => res).then(res => {
console.log(res); // 王小端Coder
});

采用链式的then,可以指定一组按照次序调用的回调函数。这时,前一个回调函数,有可能返回的还是一个Promise对象(即有异步操作),这时后一个回调函数,就会等待该Promise对象的状态发生变化,才会被调用。

Promise的语法糖catch

catch是用于指定发生错误的回调函数。

new Promise((resolve, reject) => {
reject('失败');
}).catch(error => {
console.log(error); // 失败
});

Promise实例当状态改变为rejected状态或者操作失败抛出异常错误,就会被catch方法捕获。所以在Promise实例中reject方法等同于抛出错误。如果Promise的状态已经变成了resolved,再抛出错误无效。

new Promise((resolve, reject) => {
reject('失败');
throw new Error('抛出异常'); // 这行无效
}).catch(error => {
console.log(error); // 失败
});

Promise的finally方法

finally方法用于指定不管Promis对象最后状态如何,都会执行的操作。该方法是 ES2018 引入标准的。

new Promise((resolve, reject) => {
resolve();
}).then(res => {
console.log('success');
}).catch(error => {
console.log('error');
}).finally(() =>{
console.log('finally');
})

Promise的all方法

Promise.all方法用于将多个Promise实例,包装成一个新的Promise实例。在all方法中可以传递多个Promise对象,当所有的Promise对象状态都返回fufilled,才会返回fulfilled,否则返回rejected。

const promise1 = new Promise((resolve, reject) => {
resolve();
})
const promise2 = new Promise((resolve, reject) => {
resolve();
})
const promise3 = new Promise((resolve, reject) => {
resolve();
}) const promiseAll = Promise.all([promise1, promise2, promise3]).then(res => {
console.log('all');
})

Promise的race方法

Promise.race方法同样是将多个Promise实例,包装成一个新的Promise实例。可以传递多个Promise对象作为参数,如果实例红有一个实例率先改变状态,那么race的状态就会跟着改变。

const promise1 = new Promise((resolve, reject) => {
reject();
})
const promise2 = new Promise((resolve, reject) => {
resolve();
})
const promise3 = new Promise((resolve, reject) => {
reject();
}) const promiseRace = Promise.race([promise1, promise2, promise3]).then(res => {
console.log('race then');
}).catch(error => {
console.log('race catch');
})

Promise 结束!谢谢大家能够指出其中的不足。

整理一下Promise 的用法的更多相关文章

  1. 简单谈谈js中Promise的用法

    首先先推荐一篇博文:http://blog.csdn.net/jasonzds/article/details/53717501 这篇博文很清晰的说明了Promise的用法,这里来简单总结一下: Pr ...

  2. JavaScript异步与Promise基本用法(resolve与reject)

    Promise解决的问题相信每个前端都遇到过这样一个问题,当一个异步任务的执行需要依赖另一个异步任务的结果时,我们一般会将两个异步任务嵌套起来,这种情况发生一两次还可以忍,但是发生很多次之后,就形成了 ...

  3. 理解并掌握Promise的用法

    前沿:  Promise在处理异步操作非常有用.项目中,与后端进行数据请求的时候经常要用到Promise.我们可以用promise + xhr进行ajax的封装.也可以使用基于promise封装的请求 ...

  4. [js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)

    关于promise我在之前的文章已经应用过好几次,如[js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist,本文就来讲解下pro ...

  5. Promise的用法

    promise.then().promise.catch().Promise.all()... Promise 构造函数接受一个函数作为参数,该函数的2个参数分别是 resolve 和 reject. ...

  6. ES6关于Promise的用法

    Promise 对象用于一个异步操作的最终完成(或失败)及其结果值的表示.简单点说,它就是用于处理异步操作的,异步处理成功了就执行成功的操作,异步处理失败了就捕获错误或者停止后续操作. 它的一般表示形 ...

  7. ES6的promise函数用法讲解

    总结:Promise函数的出现极大的解决了Js中的异步调用代码逻辑编写太过复杂的问题,Promise对象让异步调用函数的流程显得更加的优雅,也更容易编写. 举例: 1. 异步调用: 假设现在我的一个页 ...

  8. 入门Promise的用法

    new Promise(function(resolve,reject){ resolve(); //数据处理完成 reject(); //数据处理出错 }).then(function A(){ / ...

  9. ES6关于Promise的用法详解

    Node的产生,大大推动了Javascript这门语言在服务端的发展,使得前端人员可以以很低的门槛转向后端开发. 当然,这并不代表迸发成了全栈.全栈的技能很集中,绝不仅仅是前端会写一些HTML和一些交 ...

随机推荐

  1. PAT 甲级 1054 The Dominant Color (20 分)(简单题)

    1054 The Dominant Color (20 分)   Behind the scenes in the computer's memory, color is always talked ...

  2. Node.js使用MySQL连接池示例

    下面是一个封装好的工具类: var fs = require('fs'); var mysql = require('mysql'); var pool = mysql.createPool({ ho ...

  3. DB2学习笔记备忘 2018.5.9

    DB2安装的时候选择了和系统用户一致的选项,然后登陆的时候,连接的时候输入的就是计算机用户的用户名和密码. 1.3 DB2数据库体系结构 系统 一个系统表示DB2的一个安装.在一个由很多及其组成的网络 ...

  4. css3 animation 点亮灯光效果

    <style> .wrap .bulb { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50% ...

  5. iOS-UILabel的使用

     常用属性UILabel //显示的文字 @property(nonatomic,copy)   NSString           *text; //字体 @property(nonatomic, ...

  6. demo rabbitmq topic(主题模式),fanout(广播模式),轮询分发,确认接收Ack处理

    //durable = true 代表持久化 交换机和队列都要为true ,持久代表服务重启,没有处理的消息依然存在 //topic 根据不同的routkey 发送和接收信息 //fanout 广播模 ...

  7. vue等单页面应用及其优缺点

    优点: Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,核心是一个响应的数据绑定系统.MVVM.数据驱动.组件化.轻量.简洁.高效.快速.模块友好. 缺点: 不支持低版本 ...

  8. 【长期更新】Leetcode刷题心得与思考

    1.递归与动态规划的思考 Leetcode第95题 递归问题最重要的问题是想明白函数的作用是什么? 这个例子中函数的返回值就是给定a-b这个区间的数字,返回它所有可能的Tree,此时你不需要明白具体怎 ...

  9. 机器学习第二节_pandas_数据操作

    今天打个卡, 还不错,学到20课了, 简单的把pandas的操作过一遍, 这没有numpy学的好 1. 读取csv文件 import pandasfood_info = pandas.read_csv ...

  10. esigner中name和comment互換

    1 PowerDesigner中批量根据对象的name生成comment的脚本 执行方法:Open PDM -- Tools -- Execute Commands -- Run Script Opt ...