前言
老生常谈promise
对于promise大部分人应该不陌生了，他是ES6的新特性之一，如果你是一个追求潮流的coder那么你应该用过axios请求方式，这个向后台发送请求的方式就用到了promise
我接触promise是一年前，部门的程序员会轮流培训，刚好当时我在看一些关于axios的东西，就准备培训一些关于promise的知识，所以我就找了很多关于promise的博客，看的也是云里雾里，可想而知培训的效果也不是很好
promise再探
promise很火，可以说是程序员居家旅行必备的技能之一了，所以说对于这样的东西，我们最好还是吃透它，这样才不会在代码当中迷失。
promise的作用
大多数人开发的过程中应该都会遇到一些异步的问题，比如我们必须等请求接口返回数据后才去做另外一些事情，我们都是通过回调函数来做
大部分好的情况是只需要等待一个异步的结果就可以去做一些事情，那么极端的情况是不同的异步嵌套，让我们的代码看上去就像一个金字塔，一层层的异步嵌套让我们头皮发麻，这种情况被我们称为回调地狱
fs.readFile('./sample.txt', 'utf-8', (err, content) => {
let keyword = content.substring(0, 5);
db.find(`select * from sample where kw = ${keyword}`, (err, res) => {
get(`/sampleget?count=${res.length}`, data => {
console.log(data);
});
});
});
回调的缺点
- 嵌套太深，难以维护
- 无法正常使用return和throw
- 无法正常检索出堆栈信息
promise就可以解决这些问题，可以让我们的代码跟优雅更具有可读性，给promise下个定义
promise是异步编程的一种解决方案，比回调函数更何理更强大
promise是一个代理对象，它和原先的操作并未关系，我们只需要把原先的操作放入执行器里
它通过一个回调函数，然后把其它的回调全部基于此回调函数
我们从使用层面上再来定义以下promise
- 主要用于异步计算
- 可以将异步操作队列化，让程序按照期望的顺序来执行，返回符合预期的结果
- 可以在对象之间传递和操作promise，帮助我们处理队列
同步和异步
大家都知道同步和异步，但是让你给他下个定义你知道吗？
一般而言，操作分为两种发出调用和得到结果，发出调用立即得到结果为同步，发出调用，无法立即得到结果，需要一些额外的操作才能得到预期的结果为异步。同步是在发出调用后一直等待程序是阻塞状态，异步发出调用后程序可以继续执行
异步操作的常见用法
- 事件侦听与响应
dom.addEventListener(type,callback)
$(dom).on(type,callback)
- 在浏览器中异步操作以事件为主
promise的三种状态
- pendding 实例化时候的状态
- fullfilled 操作成功后
- rejected 被否决操作失败
promise实例的后两种状态一经改变后不会再次改变，比如状态改成fullfilled不会在改成rejected
promise的结构
new Promise((resolve,reject)=>{
//此处执行一段异步代码 （这个部分被称为执行器）
//异步处理有结果之后执行对应的
resolve() //操作成功调用此回调，把promise实例的状态改成fullfilled
reject() //操作失败调用此回调，把promise实例的状态改成rejected
}).then((res,rej) => {
})
在then函数里返回一个新的promise,then支持两个参数（这个地方有一个坑 因为需要手动return），分别对应上一个promise实例的两个回调
then可以链式的调用，当前面一个promise的状态改变时，后面的then会根据前面一个promise的状态执行对应状态的回调
image.png
借用慕课网老师的一张图，看一下整个流程
- 实例化promise
- 执行器执行一段异步代码
- 判断异步代码执行成功或者失败分别调用resolve()或者rejected()
- resolve()或者rejected()改变promise实例的状态fullfilled或者rejected
- 执行then里面的对应promise状态的回调，fullfilled执行res()，rejected执行rej()
- then返回新的promise(需要使用return关键字)
- 下一个then会根据新返回来的promise的实例执行对应状态的res()或者rej()
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('hello')
},3000)
}).then(
res =>{
return res+ ' world'
}
).then(
res =>{
console.log(res) // hello world
}
).catch(
err=>{
console.log(err)
}
)
就先简单介绍到这里吧
下周我会写一些用法，以及使用过程中常用的错误
网友评论