promise和async/await都是es6的新增特性,都是处理异步问题的好办法。
 
Promise是干什么的?
 
1、主要用于异步计算
 
2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果
 
3、可以在对象之间传递和操作promise,帮助我们处理队列
 
Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值.
 
先用代码简单实现一下:
 
    function waiting() {
        return new Promise((resolve
, reject
) => {
            
            setTimeout(function () {
                resolve('2')  
				
            }, 2000)
        })
    }
    console
.log(1)
    console
.log(3)
    
    waiting().then(res 
=> {
        console
.log('res:', res
)
        
    })
    
    
   	
	
    
 
打印结果:
 
 
可以看见,先打印的1和3,两秒之后打印的2,这不是我们要的结果,我要的是依次打印1,2,3
 
function waiting() {
        return new Promise((resolve
, reject
) => {
            
            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
) {...}   );
 
它里面有两个参数 一个是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
)               
}).catch((error
) => {
  console
.log(error
)
})
Promise
.all([p1
,p3
,p2
]).then((result
) => {
  console
.log(result
)
}).catch((error
) => {
  console
.log(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
)  
})
 
async/await
 
首先有两个条件
 
1.await后面接一个会return new promise的函数并执行它
 
2.await只能放在async函数里
 
看代码实现:
 
串行执行:必须先执行第一个异步,将第一个异步的结果返回传递给第二个异步函数,再执行第二个异步的操作过程
function waiting() {
    return new Promise((resolve
,reject
)=>{
          
             setTimeout(function() {
                resolve('第二个接口返回')
            },2000)
        
    })
 }
function waiting2() {
    return new Promise((resolve
,reject
)=>{
          
             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(function() {
                resolve('第二个接口返回')
            },2000)
     
    })
 }
function waiting2() {
    return new Promise((resolve
,reject
)=>{
          
             setTimeout(function() {
                reject('第二接口返回')
            },2000)
     
    })
 }
async function handleFn() {
   console
.log(1)
    
    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还是异步操作。
                
                
                
        
    
转载请注明原文地址:https://tech.qufami.com/read-17880.html