异步解决方案之promise、asyncawait(详解)@zj-zhangjie

tech2024-08-06  44

promise和async/await都是es6的新增特性,都是处理异步问题的好办法。

Promise是干什么的?

1、主要用于异步计算

2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果

3、可以在对象之间传递和操作promise,帮助我们处理队列

Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值.

先用代码简单实现一下:

function waiting() { return new Promise((resolve, reject) => { //这里用定时器模拟我请求ajax/axios数据的延迟,模拟异步操作 setTimeout(function () { resolve('2') //数据处理成功 //reject('2') //数据处理错误 }, 2000) }) } console.log(1) console.log(3) //成功返回 waiting().then(res => { console.log('res:', res) }) //失败返回 //.catch(error=>{ // console.log('error:',error) //})

打印结果:

可以看见,先打印的1和3,两秒之后打印的2,这不是我们要的结果,我要的是依次打印1,2,3

function waiting() { return new Promise((resolve, reject) => { //这里用定时器模拟我请求ajax/axios数据的延迟 setTimeout(function () { resolve('2') }, 2000) }) } waiting().then(res => { console.log(1) console.log('res:', res) console.log(3) })

打印结果:

这样一打印,出来的就是1,2,3 这样就处理了异步的问题。

Promise 语法结构:

new Promise( function(resolve, reject) {...} /* executor */ );

它里面有两个参数 一个是resolve,一个是reject

resolve是成功返回 reject是失败返回。

Promise的其他方法:

Promise.all

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值。

let p1 = new Promise((resolve, reject) => { resolve('成功了') }) let p2 = new Promise((resolve, reject) => { resolve('success') }) let p3 = Promse.reject('失败') Promise.all([p1, p2]).then((result) => { console.log(result) //['成功返回', 'success'] }).catch((error) => { console.log(error) }) Promise.all([p1,p3,p2]).then((result) => { console.log(result) }).catch((error) => { console.log(error) // 失败返回, 'error' })

Promise.all在处理多个异步处理时非常有用,比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示,在此之前只显示loading图标。Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的,即p1的结果在前,即便p1的结果获取的比p2要晚。这带来了一个绝大的好处:在前端开发请求数据的过程中,偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景,使用Promise.all就可以解决这个问题。

Promise.race

Promise.race([p1, p2, p3])里面哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。

看代码展示:

let p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('success') },1000) }) let p2 = new Promise((resolve, reject) => { setTimeout(() => { reject('error') }, 500) }) Promise.race([p1, p2]).then((result) => { console.log(result) }).catch((error) => { console.log(error) // 打开的是 'error' })

async/await

首先有两个条件

1.await后面接一个会return new promise的函数并执行它

2.await只能放在async函数里

看代码实现:

串行执行:必须先执行第一个异步,将第一个异步的结果返回传递给第二个异步函数,再执行第二个异步的操作过程 //第一个函数 function waiting() { return new Promise((resolve,reject)=>{ //我这里只是用setTimeout来模拟axios, setTimeout(function() { resolve('第二个接口返回') },2000) }) } //第二个函数 function waiting2() { return new Promise((resolve,reject)=>{ //我这里只是用setTimeout来模拟axios, setTimeout(function() { reject('第二接口返回') },2000) }) } async function handleFn() { console.log(1) //串行执行,先等待第一个函数返回 let res=await waiting() console.log('res:',res) //再等待第二个函数返回 let res2=await waiting2(res) console.log(res2) } 并行:两个接口同时执行 function waiting() { return new Promise((resolve,reject)=>{ //我这里只是用setTimeout来模拟axios, setTimeout(function() { resolve('第二个接口返回') },2000) }) } function waiting2() { return new Promise((resolve,reject)=>{ //我这里只是用setTimeout来模拟axios, setTimeout(function() { reject('第二接口返回') },2000) }) } async function handleFn() { console.log(1) //并发执行,waiting(),waiting2()两个接口都成功返回才返回结果 let res=await Promise.all([waiting(),waiting2()]) console.log('res:',res) console.log('end') } handleFn().catch(res=>{ console.log('error:',res) })

await字面意思就是等待,await后面要跟一个promise对象,返回结果就是它后面Promise执行的结果,可能是返回成功或者是返回失败的值,给人的感觉就像里面的操作是同步一样,但其本质async还是异步操作。

最新回复(0)