1 Promise的理解
1.1 promise是什么
1.1.1理解:
-
抽象表达
- Promise是一门新的技术(ES6规范)
- Promise是JS中进行一部编程的新的解决方案(旧方案是单纯使用回调函数)
-
具体表达
- 从语法上来说:Promise是一个构造函数
- 从功能上来说:Promise对象用来封装一个一部操作并可以获取其成功/失败的结果值
1.1.2 异步编程的例子
- fs 文件操作(fs为node.js下的一个模块,可以对磁盘进行读写操作)
const fs = require('fs'); /* fs.readFile('./resource/content.txt',(err,data)=>{ //如果错误则抛出错误 if(err) throw err; //否则输出文件内容 console.log(data.toString()); }); */ //Promise形式 let p = new Promise((resolve,reject) => { fs.readFile('./resource/content.txt',(err,data)=>{ //如果错误则抛出错误 if(err) reject(err); //如果成功 resolve(data); }); }) //调用then方法 p.then(value=>{ console.log(value.toString()); },reason =>{ console.log(reason); } )
- 数据库操作(mongoDB,MySQL等)
- AJAX
$.get('/server', (data)=>{ })
- 定时器
setTimeout(()=>{ }, 2000);
1.2 为什么要使用Promise
1.2.1 指定回调函数的方式更加灵活
- 旧的:必须在启动异步任务之前指定
- promise:启动异步 => 返回promise对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定多个)
1.2.2 支持链式调用,可以解决回调地狱问题
- 回调地狱:回调函数嵌套调用,外部回调函数异步执行的 结果是嵌套的回调执行的条件
- 回调地狱的缺点
- 不便于阅读
- 不便于异常处理
- 解决方案:promise链式调用
- 终极解决方案:async/await
1.3 Promise 的状态
- 实例对象中的一个属性 『PromiseState』
- pending 未决定的
- resolved / fullfilled 成功
- rejected 失败
- promise的状态改变
- pending变为resolved/fullfilled
- pending变为rejected
-
只有这两种变化可能,也就是说不可能由resolved变为rejected,且一个promise对象只能改变一次
-
无论变为成功还是失败,都会有一个结果数据
-
成功的结果数据一般称为value,失败的结果数据一般称为reason
1.4 Promise 对象的值
实例对象中的另一个属性 『PromiseResult』
保存着异步任务『成功/失败』的结果,下面两个函数可以修改对返回的结果进行修改,其他皆不可以
- resolve()
- reject ()
1.5 promise的基本流程
2 Promise的使用
2.1 API
- Promise构造函数:Promise(excutor){}
- executor函数:执行器(resolve,reject) => {}
- resolve函数:内部定义成功时我们调用的函数 value => {}
- reject函数:内部定义失败时我们调用的函数 reason => {}
- 说明:executor会在Promise内部立即同步调用,异步操作在执行器中执行
<script>
let p = new Promise((resolve,reject)=>{
//同步调用
console.log(111);
});
console.log(222);
</script>
- Promise.prototype.then方法:(onResolved,onReject) => {}
- onResolved函数:成功的回调函数 (value) => {}
- onReject函数:失败的回调函数 (reason) => {}
-
说明:指定用于得到成功value的成功回调和用于得到失败reason的失败回调返回一个新的promise对象
- Promise.prototype.catch方法:(onRejected) => {}
- onRejected函数:失败的回调函数 (reason) =>{}
-
说明:then()的语法糖,相当于:then(undefined,onRejected)
<script> let p = new Promise((resolve,reject)=>{ //修改promise对象的状态 reject('error') }); //执行catch方法 p.catch(reason =>{ console.log(reason); //输出error }) </script>
- Promise.resolve方法:(value) => {}
- value:成功的数据或promise对象
-
说明:返回一个成功/失败的 promise 对象
<script> let p1 = Promise.resolve(123); //如果传入的参数为非Promise类型的对象,则返回的结果皆为成功的promise对象 console.log('p1:',p1); //如果传入的参数为Promise对象,则参数的结果决定resolve的结果 let p2 = Promise.resolve(new Promise((resolve,reject) => { //成功的结果 resolve('OK') })) console.log("p2:",p2)