异步编程
*fs文件操作
*数据库操作
*ajax
*定时器
在promise之前的解决方式:
旧的解决方法:必须在启动异步任务前指定
promise:启动异步任务=>返回promise对象=>给promise对象绑定回调函数(甚至可以再异步任务结束后指定/多个回调函数来处理成功/错误的结果)
promise的作用
1、promise支持链式调用,可以解决对调地狱问题
什么是回调地狱?(不方便阅读+异常处理)
回调函数嵌套调用,外部回调函数异步执行的结果是嵌套的回调执行的条件。
解决方法:promise链式调用
Promise初体验
e.g. 点击按钮,做1秒延迟显示结果
方法一:
方法二:Promise
promise的两个参数(方法),
resolve
表示成功(可以将promise的状态改为成功),reject
表示失败(将promise的状态改为失败),.then(fn1,fn2)
:若promise的状态为【成功】,调用fn1
,状态为【失败】,则调用fn2
。promise 的状态改变 PromiseState
实例对象中的一个属性(PromiseState)
pending:未决定的
resolved(fullfilled):成功
rejected:失败
仅存在的两种变换:
pending ==> resolved(fullfilled):成功
pending ==> rejected:失败
无论是变为成功还是失败,都会有一个结果数据,成功的结果一般称为value,失败的结果称为reason
Promise对象的值 PromiseResult
实例对象中的另一个属性 (PromiseResult),用来存放对象(异步任务)【成功/失败】的结果。
只有resolve和reject 这两个函数可以修改PromiseResult的值。
Promise工作流程
Promise相关的API
1、Promise 构造函数:Promise(excutor){}
(1)excutor函数:执行器 (resolve,reject)=>{}
(2)resolve函数:内部定义的,成功时我们调用.then()
中的函数 value => {}
(3)reject函数:内部定义失败时调用函数reason => {}
说明:executor会在Promise内部立即执行同步调用,异步操作在执行器中执行
同步调用:
let p = new Promise((resolve,reject)=>{
//同步调用
console.log(111);
})
console.log(222);
//执行顺序:先111后222,说明executor函数是同步调用的,不会进到队列中,会立即执行
2、Promise.prototype.then方法:(onResolved,omRejected)=>{}
(1)onResolved函数:成功时回调函数,成功后调用then方法中的 (value) => {}
(2)onRejected函数:失败时回调函数,失败后调用then方法中的 (reason)=>{}
说明:指定用于得到成功value的成功回调函数和用于得到失败reason的失败回调函数,返回一个新的promise对象。
3、Promise.prototype.catch方法:(onRejected)=>{}
catch方法只能指定失败的回调函数,不能指定成功的。
(1)onReiected函数:失败的回调函数 (reason)=>{}
Promise中的方法
1、Promise.resolve方法:(value)=>{}
接受一个参数,返回成功或者失败的promise对象。
如果传入的参数为 非promise对象,返回的结果为成功的promise对象;
如果传入的参数为 promise对象,则参数的结果决定了返回的结果。
let p1 = Promise.resolve(2312);
let p2 = Promise.resolve(new Promise((resolve,reject) => {
//resolve("OK");
reject("Error");
}))
console.log(p1);//返回成功的promise对象
console.log(p2);//返回失败的promise对象
2、Promise.reject方法:(reason)=>{}
接受一个参数,返回失败的promise对象。
不管参数传入的是什么,返回结果永远都是失败的promise对象
3、Promise.all方法:(promise)=>{}
promise:包含n个promise的数组
说明:返回一个新的promise对象,只有所有的promise都成功才返回成功状态的promise,否则就返回失败的promise
4、Promise.race方法:(promise)=>{}
promise:包含n个promise的数组
说明:返回一个新的promise对象,第一个完成的promise的结果状态就是最终返回的promise的结果状态
promise中几个重要的点
async 函数
1、async 函数的返回值是promise对象
2、返回的promise对象的结果由async函数执行的返回值决定
await 表达式
1、await 右侧的表达式一般为promise对象,但也可以是其他的值
2、如果表达式是promise对象,await返回的 是promise成功的值(注:返回的是值,不是promise对象),如果promise状态为失败,则await抛出异常(需要try-catch捕获)
3、如果表达式是其他值,直接将此值作为await的返回值
注意:
1、await必须写在async函数中,但async函数可以没有await
2、如果await后面的promise失败了,就会抛出异常,需要通过try...catch捕获处理
(使用场景:比如我需要这几个接口都拿到数据之后再渲染页面或者做一些处理 ,await就有用了)
async与 await的联合使用
案例:读取文件
使用回调函数的方法:
使用async与 await:
util中的promisify()可以将其中内容转为promise对象