什么是promise?promise的作用是什么?
promise是什么?
1、主要用于异步计算
2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果
3、可以在对象之间传递和操作promise,帮助我们处理队列
为什么会有promise?
为了避免界面冻结(任务)
同步:
假设你去了一家饭店,找个位置,叫来服务员,这个时候服务员对你说,对不起我是“同步”服务员,我要服务完这张桌子才能招呼你。那桌客人明明已经吃上了,你只是想要个菜单,这么小的动作,服务员却要你等到别人的一个大动作完成之后,才能再来招呼你,这个便是同步的问题:也就是“顺序交付的工作1234,必须按照1234的顺序完成”。
异步:
则是将耗时很长的A交付的工作交给系统之后,就去继续做B交付的工作,。等到系统完成了前面的工作之后,再通过回调或者事件,继续做A剩下的工作。
AB工作的完成顺序,和交付他们的时间顺序无关,所以叫“异步”。
异步操作的常见语法
1.事件监听
document.getElementById('#start').addEventListener('click', start, false);
function start() {// 响应事件,进行相应的操作
}
// jquery on 监听
$('#start').on('click', start)
2.回调
// 比较常见的有ajax
$.ajax('http://www.wyunfei.com/', {success (res) {// 这里可以监听res返回的数据做回调逻辑的处理}
})// 或者在页面加载完毕后回调
$(function() {// 页面结构加载完成,做回调逻辑处理
})
异步回调的问题:
- 之前处理异步是通过纯粹的回调函数的形式进行处理
- 很容易进入到回调地狱中,剥夺了函数return的能力
- 问题可以解决,但是难以读懂,维护困难
- 稍有不慎就会踏入回调地狱 - 嵌套层次深,不好维护
一般情况我们一次性调用API就可以完成请求。
有些情况需要多次调用服务器API,就会形成一个链式调用,比如为了完成一个功能,我们需要调用API1、API2、API3,依次按照顺序进行调用,这个时候就会出现回调地狱的问题
promise
- promise是一个对象,对象和函数的区别就是对象可以保存状态,函数不可以(闭包除外)
- 并未剥夺函数return的能力,因此无需层层传递callback,进行回调获取数据
- 代码风格,容易理解,便于维护
- 多个异步等待合并便于解决
new Promise(function (resolve, reject) {// 一段耗时的异步操作resolve('成功') // 数据处理完成// reject('失败') // 数据处理出错}
).then((res) => {console.log(res)}, // 成功(err) => {console.log(err)} // 失败
)
- resolve作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
- reject作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
promise有三个状态:
1、pending[待定]初始状态
2、fulfilled[实现]操作成功
3、rejected[被否决]操作失败
当promise状态发生改变,就会触发then()里的响应函数处理后续步骤;
promise状态一经改变,不会再变。
Promise对象的状态改变,只有两种可能:
从pending变为fulfilled
从pending变为rejected。
这两种情况只要发生,状态就凝固了,不会再变了。
最简单的实例:
new Promise(resolve => {setTimeout(() => {resolve('hello')}, 2000)
}).then(res => {console.log(res)
})
分两次 顺序执行
new Promise(resolve => {setTimeout(() => {resolve('hello')}, 2000)}).then(val => {console.log(val) // 参数val = 'hello'return new Promise(resolve => {setTimeout(() => {resolve('world')}, 2000)})}).then(val => {console.log(val) // 参数val = 'world'})
promise完成之后再then
let pro = new Promise(resolve => {setTimeout(() => {resolve('hello world')}, 2000)})setTimeout(() => {pro.then(value => {console.log(value) // hello world})}, 2000)
结论:promise作为队列最为重要的特性,我们在任何一个地方生成了一个promise队列之后,我们可以把他作为一个变量传递到其他地方。
.then()
1、接收两个函数作为参数,分别代表fulfilled(成功)和rejected(失败)
2、.then()返回一个新的Promise实例,所以它可以链式调用
3、当前面的Promise状态改变时,.then()根据其最终状态,选择特定的状态响应函数执行
4、状态响应函数可以返回新的promise,或其他值,不返回值也可以我们可以认为它返回了一个null;
5、如果返回新的promise,那么下一级.then()会在新的promise状态改变之后执行
6、如果返回其他任何值,则会立即执行下一级.then()
.then()里面有.then()的情况
1、因为.then()返回的还是Promise实例
2、会等里面的then()执行完,再执行外面的
then嵌套
对于我们来说,此时最好将其展开,也是一样的结果,而且会更好读:
错误处理
Promise会自动捕获内部异常,并交给rejected响应函数处理。
第一种错误处理
第二种错误处理
总结:错误处理两种做法:
第一种:reject(‘错误信息’).then(() => {}, () => {错误处理逻辑})
第二种:throw new Error(‘错误信息’).catch( () => {错误处理逻辑})
推荐使用第二种方式,更加清晰好读,并且可以捕获前面所有的错误(可以捕获N个then回调错误)
原文链接:https://www.jianshu.com/p/1b63a13c2701
什么是promise?promise的作用是什么?相关推荐
- Promise.any 的作用,如何自己实现一个 Promise.any
引言 本文从五个方面介绍 Promise.any : Promise.any 的作用 Promise.any 应用场景 Promise.any vs Promise.all Promise.any v ...
- 【Promise】自定义 - 手写Promise - Promise.all - Promise(executor)
手写Promise 1. 整体结构框架 2. Promise(executor) 3. Promise.prototype.then 4. Promise.prototype.catch 5. Pro ...
- Promise ,Promise.all 和Promise.race的区别
Promise ,Promise.all 和Promise.race的区别 Promise promise是用来解决异步编程问题的,比传统的回调函数和事件处理方法要更加的合理. promise有三个状 ...
- JavaScript异步函数Promise①——Promise筑基
期约是对尚不存在的一个替身.期约(promise)这个名字最早是由 Daniel Friedman和 David Wise在他们于 1976 年发表的论文"The Impact of App ...
- vue 手写签名_手写Promise/Promise.all/Promise.race(手写系列一)
背景 几个月没写文章了,愧对关注本专栏的小伙伴.最近有同学提议我出一个手写系列的文章对常见对前端工具.框架.设计模式做一个覆盖.同时有个要求:代码要尽量短小易懂,并且体现原理,让学习者学习过后能在未来 ...
- Promise的基本用法以及作用
目录 1- 初识Promise 2- 回调地狱的引发 3- Promise (承诺)的用法 4- async 异步 5- await 6- 使用 async 解决回调地狱问题 1- 初识Promise ...
- ES6中的Promise详解
Promise 在 JavaScript 中很早就有各种的开源实现,ES6 将其纳入了官方标准,提供了原生 api 支持,使用更加便捷. 定义 Promise 是一个对象,它用来标识 JavaScri ...
- 入门Promise的正确姿势
Promise是异步编程的一种解决方案,从语法上说,Promise是一个对象,从它可以获取异步操作的消息. Promise的基本用法 Promise构造函数接受一个函数作为参数,该函数的两个参数分别是 ...
- 浅谈ES6原生Promise
ES6标准出炉之前,一个幽灵,回调的幽灵,游荡在JavaScript世界. 正所谓: 世界本没有回调,写的人多了,也就有了})})})})}). Promise的兴起,是因为异步方法调用中,往往会出现 ...
最新文章
- Docker(十四):Docker:网络模式详解
- 平衡自动化与智能化,构建AI生态系统
- 【Android 逆向】ARM CPU 架构体系 ( ARM 处理器工作模式 | ARM 架构模型 )
- 安装hmmlearn
- 关于webservice(CXF)的一些理解
- 学习 Linux/C/C++ 必备资料
- .xib .plist .pch
- Python——杂记
- 机器学习面试--决策树
- 数据库之互联网常用架构方案一览
- 源码:Java集合源码之:哈希表(二)
- B. Hierarchy
- html制作摩天轮,LED幻彩摩天轮的制作方法
- 营业执照在线生成_潍坊发出全省首张覆盖四大市场主体类型的“微信秒批”营业执照...
- Ubuntu中将otf字体转换为ttf字体
- Android音视频开发之如何合并音频和视频文件?
- 关于iis中域名转向的问题
- 饥荒控制台输入没用_饥荒代码为什么我输入没反应
- 软件工程专业四个方向
- 为什么打开CAD显示驱动该文件(.hdi)缺少或已损坏?